1.4k star | FlipOff：把你的电视变成复古翻转公告牌，$3500的硬件现在免费了

开源项目精选集
0 阅读1分钟

最近刷 GitHub，发现了 FlipOff。

这个项目让我愣了好几秒——它用纯 HTML/CSS/JS，完整模拟了机场、火车站那种老式分屏翻转公告牌（Split-Flap Display）。就是你在老电影里看到的，每个字符"咔嗒"一声翻页的那种。

而现在，这个效果在浏览器里就能跑，还完全免费。
image.png 复古翻转公告牌，浏览器里就能跑

01 它是什么？

FlipOff 是一个开源的网页应用，模拟经典的分屏翻转公告牌。

痛点是什么？

这种翻转公告牌在机场、火车站很常见，视觉效果非常抓人。但商用硬件一套要 $3,500 起，而且完全没有软件方案。

FlipOff 出现了：零成本，纯前端，在任何浏览器里跑，电视接上就是一块复古公告牌。

02 核心原理/亮点

FlipOff 没有用任何框架，核心靠两件事：

视觉：CSS 3D 翻转动画

每个字符砖独立运作，变更时会先经过一段"乱码闪烁"（彩色随机字符），然后定格在目标字符——完全还原机械翻转的视觉感。

音效：Web Audio API + 真实录音

音效文件是真实分屏翻转公告牌的录音，base64 内嵌在 JS 里，随机应变只触发一次，和视觉完美同步。

image.png
纯前端架构，无需后端，无需联网

核心亮点：

  • 纯前端：不依赖任何框架，index.html 直接打开就能用
  • 离线可用：零外部依赖
  • 音效同步：真实机械录音，代入感极强
  • 全屏 TV 模式：按 F 进入全屏，接电视效果震撼
  • 高度可定制：改几行配置就能换消息、换颜色、换网格尺寸

03 应用场景

谁适合用？

  • 🏠 家庭/办公室：把闲置电视变成信息公告栏
  • 🎬 活动现场：作为复古风签到台或倒计时屏
  • 🖥️ 直播/视频：OBS 嵌入当背景，氛围感拉满
  • 🏢 门店展示：替代昂贵硬件，低成本高颜值
    image.png 全屏 TV 模式，按 F 键一键切换

04 快速上手

# 克隆项目
git clone https://github.com/magnum6actual/flipoff.git
cd flipoff

# 方式一：直接打开
open index.html

# 方式二：本地服务
python3 -m http.server 8080
# 然后打开 http://localhost:8080

使用：

  • 点击任意位置开启音效
  • 按 F 进入全屏 TV 模式
  • Enter / → 手动切换消息
  • M 静音

定制消息（编辑 js/constants.js）：

const MESSAGES = [
  "Hello World",
  "Welcome to Our Event",
  "你的自定义消息",
];

写在最后

FlipOff 解决了一个看似简单却没人解决的问题：如何低成本拥有那块复古公告牌。

3,500的硬件→3,500 的硬件 → 0 的开源软件。它没有复杂的架构，没有 AI 加持，只靠几行 CSS 动画和一个音效文件，就把一个价值感极强的视觉体验带了回来。

有时候好东西就是这样——不是堆技术，而是让技术消失在体验里。

相关链接：

你家里有闲置电视吗？接上它，也许就是一块最特别的公告牌。

avatar
文章
阅读
粉丝