Flappyboards
Turn any TV into a retro split-flap display. Free & open source.
Install / Use
/learn @vxcozy/FlappyboardsREADME
What it does
FlappyBoards renders a 6x22 grid of split-flap tiles that animate with realistic CSS 3D transforms. Each tile cycles sequentially through the full character set — just like a real mechanical display — with staggered timing, physics-based easing, and synchronized clack sounds.
- 30+ curated quotes that auto-rotate on a configurable timer
- Dark and light theme with monochromatic aesthetic
- Settings panel for flip speed, stagger delay, rotation interval, volume
- Custom text input — type any message and send it to the display
- Weather API integration ready (OpenWeatherMap)
- PWA-installable for always-on TV mode
- Responsive scaling from mobile to 4K
Quick start
git clone https://github.com/vxcozy/flappyboards.git
cd flappyboards
npm install
npm run dev
Open http://localhost:3000 for the landing page, or http://localhost:3000/display for the full-screen display.
Documentation
Documentation follows the Diataxis framework:
| | Learning-oriented | Task-oriented | |---|---|---| | Practical | Tutorial | How-to Guides | | Theoretical | Explanation | Reference |
- Tutorial — Get started from zero: install, run, and display your first message
- How-to Guides — Solve specific tasks: add custom quotes, enable weather, deploy to a TV
- Reference — Technical specifications: character set, component API, file structure
- Explanation — How it works: animation engine, audio sync, theme system
Tech stack
| Layer | Choice | |-------|--------| | Framework | Next.js 15 (App Router) | | Animation | CSS 3D transforms + imperative DOM manipulation | | Audio | Web Audio API (synthesized mechanical clacks) | | Styling | Tailwind CSS 4 + CSS Modules | | State | Zustand with localStorage persistence | | Fonts | Geist Sans + Geist Mono | | Deployment | Vercel |
License
MIT — see LICENSE.
Made with ♡ by Cozy
