Flipoff Split Flap Display

作者 reason-machines2384a003145a無授權條款83 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫3 個月前更新

Expert skill for building, customizing, and embedding the FlipOff split-flap display emulator — a free, offline-capable web app that turns any browser/TV into a retro airport departure board.

僅含說明Design & Creative Software Development

AI 產生的概覽

指導建置、自訂與嵌入 FlipOff 翻牌顯示模擬器，這是一款純 HTML/CSS/JS 的復古翻牌看板網頁應用程式。

功能: 說明如何安裝與設定 FlipOff 翻牌顯示模擬器，涵蓋網格尺寸、顏色、訊息、鍵盤快速鍵、音效與動畫設定。內容介紹專案檔案結構，以及 Board、MessageRotator、SoundEngine、KeyboardController 等 JavaScript 類別。也示範如何透過 iframe 或內嵌模組嵌入翻牌看板，包括 React/Vue 封裝以及電視或自助服務機台部署。
適用情境: 適合在網站中加入復古翻牌看板、自訂 FlipOff 的訊息、顏色或網格尺寸，或將模擬器嵌入其他頁面或框架。也適用於需要全螢幕翻牌看板顯示的電視與自助服務機台情境。
執行需求: 需要 FlipOff 專案檔案（從其程式碼倉庫複製）與瀏覽器；建議使用 python3 -m http.server 或 npx serve 等本機靜態伺服器，以便播放音效與載入模組。不需要建置步驟、npm 套件或框架。此技能僅為說明文件，不附帶指令碼。

FlipOff Split-Flap Display Emulator

Skill by ara.so — Daily 2026 Skills collection.

FlipOff is a pure vanilla HTML/CSS/JS web app that emulates classic mechanical split-flap (flip-board) airport displays. No frameworks, no npm, no build step — open index.html and you have a full-screen retro display with authentic scramble animations and clacking sounds.

Installation

bash

git clone https://github.com/magnum6actual/flipoff.gitcd flipoff
# Option 1: Open directlyopen index.html
# Option 2: Serve locally (recommended for audio)python3 -m http.server 8080# Visit http://localhost:8080

git clone https://github.com/magnum6actual/flipoff.gitcd flipoff
# Option 1: Open directlyopen index.html
# Option 2: Serve locally (recommended for audio)python3 -m http.server 8080# Visit http://localhost:8080

Audio note: Browsers block autoplay. The user must click once to enable the Web Audio API context. After that, sound plays automatically on each message transition.

File Structure

flipoff/  index.html               — Single-page app entry point  css/    reset.css              — CSS reset    layout.css             — Header, hero, page layout    board.css              — Board container and accent bars    tile.css               — Tile styling and 3D flip animation    responsive.css         — Media queries (mobile → 4K)  js/    main.js                — Entry point, wires everything together    Board.js               — Grid manager, transition orchestration    Tile.js                — Per-tile animation logic    SoundEngine.js         — Web Audio API playback    MessageRotator.js      — Auto-rotate timer    KeyboardController.js  — Keyboard shortcut handling    constants.js           — All configuration lives here    flapAudio.js           — Base64-encoded audio data

flipoff/  index.html               — Single-page app entry point  css/    reset.css              — CSS reset    layout.css             — Header, hero, page layout    board.css              — Board container and accent bars    tile.css               — Tile styling and 3D flip animation    responsive.css         — Media queries (mobile → 4K)  js/    main.js                — Entry point, wires everything together    Board.js               — Grid manager, transition orchestration    Tile.js                — Per-tile animation logic    SoundEngine.js         — Web Audio API playback    MessageRotator.js      — Auto-rotate timer    KeyboardController.js  — Keyboard shortcut handling    constants.js           — All configuration lives here    flapAudio.js           — Base64-encoded audio data

Key Configuration — `js/constants.js`

Everything you'd want to change lives in one file:

// js/constants.js (representative structure)
export const GRID_COLS = 26;        // Characters per rowexport const GRID_ROWS = 8;         // Number of rows
export const SCRAMBLE_DURATION = 600;  // ms each tile scrambles before settlingexport const STAGGER_DELAY = 18;       // ms between each tile starting its scrambleexport const AUTO_ROTATE_INTERVAL = 8000; // ms between auto-advancing messages
export const SCRAMBLE_COLORS = [  '#FF6B35', '#F7C59F', '#EFEFD0',  '#004E89', '#1A936F', '#C6E0F5'];
export const ACCENT_COLORS = ['#FF6B35', '#004E89', '#1A936F'];
export const MESSAGES = [  "HAVE A NICE DAY",  "ALL FLIGHTS ON TIME",  "WELCOME TO THE FUTURE",  // Add your own here];

// js/constants.js (representative structure)
export const GRID_COLS = 26;        // Characters per rowexport const GRID_ROWS = 8;         // Number of rows
export const SCRAMBLE_DURATION = 600;  // ms each tile scrambles before settlingexport const STAGGER_DELAY = 18;       // ms between each tile starting its scrambleexport const AUTO_ROTATE_INTERVAL = 8000; // ms between auto-advancing messages
export const SCRAMBLE_COLORS = [  '#FF6B35', '#F7C59F', '#EFEFD0',  '#004E89', '#1A936F', '#C6E0F5'];
export const ACCENT_COLORS = ['#FF6B35', '#004E89', '#1A936F'];
export const MESSAGES = [  "HAVE A NICE DAY",  "ALL FLIGHTS ON TIME",  "WELCOME TO THE FUTURE",  // Add your own here];

Adding Custom Messages

Edit MESSAGES in js/constants.js. Each message is a plain string. The board wraps text across the grid automatically.

export const MESSAGES = [  "DEPARTING GATE 7",  "YOUR COFFEE IS READY",  "BUILD THINGS THAT MATTER",  "FLIGHT AA 404 NOT FOUND",    // max GRID_COLS * GRID_ROWS chars];

export const MESSAGES = [  "DEPARTING GATE 7",  "YOUR COFFEE IS READY",  "BUILD THINGS THAT MATTER",  "FLIGHT AA 404 NOT FOUND",    // max GRID_COLS * GRID_ROWS chars];

Padding rules: Messages shorter than the grid are padded with spaces. Messages longer than the grid are truncated. Keep messages at or under GRID_COLS × GRID_ROWS characters.

Changing Grid Size

// Compact 16×4 ticker-style boardexport const GRID_COLS = 16;export const GRID_ROWS = 4;
// Wide cinema boardexport const GRID_COLS = 40;export const GRID_ROWS = 6;
// Tall info kioskexport const GRID_COLS = 20;export const GRID_ROWS = 12;

// Compact 16×4 ticker-style boardexport const GRID_COLS = 16;export const GRID_ROWS = 4;
// Wide cinema boardexport const GRID_COLS = 40;export const GRID_ROWS = 6;
// Tall info kioskexport const GRID_COLS = 20;export const GRID_ROWS = 12;

After changing grid dimensions, tiles re-render automatically on next page load.

Keyboard Shortcuts

Programmatic API

Board

// Board.js exposes a class you can instantiate directlyimport Board from './js/Board.js';
const board = new Board(document.getElementById('board-container'));
// Display a specific stringboard.setMessage('GATE CHANGE B12');
// Advance to next message in the rotationboard.next();
// Go backboard.previous();

// Board.js exposes a class you can instantiate directlyimport Board from './js/Board.js';
const board = new Board(document.getElementById('board-container'));
// Display a specific stringboard.setMessage('GATE CHANGE B12');
// Advance to next message in the rotationboard.next();
// Go backboard.previous();

MessageRotator

import MessageRotator from './js/MessageRotator.js';
const rotator = new MessageRotator(board, messages, AUTO_ROTATE_INTERVAL);
rotator.start();   // begin auto-advancingrotator.stop();    // pause rotationrotator.next();    // manual advancerotator.previous(); // manual back

import MessageRotator from './js/MessageRotator.js';
const rotator = new MessageRotator(board, messages, AUTO_ROTATE_INTERVAL);
rotator.start();   // begin auto-advancingrotator.stop();    // pause rotationrotator.next();    // manual advancerotator.previous(); // manual back

SoundEngine

import SoundEngine from './js/SoundEngine.js';
const sound = new SoundEngine();
// Must call after a user gesture (click/keypress)await sound.init();
sound.play();    // play the flap transition soundsound.mute();    // silencesound.unmute();sound.toggle();  // flip mute state

import SoundEngine from './js/SoundEngine.js';
const sound = new SoundEngine();
// Must call after a user gesture (click/keypress)await sound.init();
sound.play();    // play the flap transition soundsound.mute();    // silencesound.unmute();sound.toggle();  // flip mute state

KeyboardController

import KeyboardController from './js/KeyboardController.js';
const kb = new KeyboardController({  onNext:       () => rotator.next(),  onPrevious:   () => rotator.previous(),  onFullscreen: () => toggleFullscreen(),  onMute:       () => sound.toggle(),});
kb.attach();   // start listeningkb.detach();   // stop listening

import KeyboardController from './js/KeyboardController.js';
const kb = new KeyboardController({  onNext:       () => rotator.next(),  onPrevious:   () => rotator.previous(),  onFullscreen: () => toggleFullscreen(),  onMute:       () => sound.toggle(),});
kb.attach();   // start listeningkb.detach();   // stop listening

Embedding FlipOff in Another Page

As an iframe

html

<iframe  src="/flipoff/index.html"  width="1280"  height="400"  style="border:none; background:#000;"  allowfullscreen></iframe>

<iframe  src="/flipoff/index.html"  width="1280"  height="400"  style="border:none; background:#000;"  allowfullscreen></iframe>

Inline embed (pull in just the board)

html

<!-- In your page --><div id="flip-board"></div>
<script type="module">  import Board from '/flipoff/js/Board.js';  import SoundEngine from '/flipoff/js/SoundEngine.js';  import { MESSAGES, AUTO_ROTATE_INTERVAL } from '/flipoff/js/constants.js';
  const board = new Board(document.getElementById('flip-board'));  const sound = new SoundEngine();
  let idx = 0;  board.setMessage(MESSAGES[idx]);
  document.addEventListener('click', async () => {    await sound.init();  }, { once: true });
  setInterval(() => {    idx = (idx + 1) % MESSAGES.length;    board.setMessage(MESSAGES[idx]);    sound.play();  }, AUTO_ROTATE_INTERVAL);</script>

<!-- In your page --><div id="flip-board"></div>
<script type="module">  import Board from '/flipoff/js/Board.js';  import SoundEngine from '/flipoff/js/SoundEngine.js';  import { MESSAGES, AUTO_ROTATE_INTERVAL } from '/flipoff/js/constants.js';
  const board = new Board(document.getElementById('flip-board'));  const sound = new SoundEngine();
  let idx = 0;  board.setMessage(MESSAGES[idx]);
  document.addEventListener('click', async () => {    await sound.init();  }, { once: true });
  setInterval(() => {    idx = (idx + 1) % MESSAGES.length;    board.setMessage(MESSAGES[idx]);    sound.play();  }, AUTO_ROTATE_INTERVAL);</script>

Custom Color Themes

// js/constants.js — dark blue terminal themeexport const SCRAMBLE_COLORS = [  '#0D1B2A', '#1B2838', '#00FF41',  '#003459', '#007EA7', '#00A8E8'];
export const ACCENT_COLORS = ['#00FF41', '#007EA7', '#00A8E8'];

// js/constants.js — dark blue terminal themeexport const SCRAMBLE_COLORS = [  '#0D1B2A', '#1B2838', '#00FF41',  '#003459', '#007EA7', '#00A8E8'];
export const ACCENT_COLORS = ['#00FF41', '#007EA7', '#00A8E8'];

css

/* css/board.css — override tile background */.tile {  background-color: #0D1B2A;  color: #00FF41;  border-color: #003459;}

/* css/board.css — override tile background */.tile {  background-color: #0D1B2A;  color: #00FF41;  border-color: #003459;}

Common Patterns

Show real-time data (e.g., a flight API)

import Board from './js/Board.js';import SoundEngine from './js/SoundEngine.js';
const board = new Board(document.getElementById('board'));const sound = new SoundEngine();
async function fetchAndDisplay() {  const res = await fetch('/api/departures');  const data = await res.json();  const message = `${data.flight}  ${data.destination}  ${data.gate}`;  board.setMessage(message.toUpperCase());  sound.play();}
document.addEventListener('click', () => sound.init(), { once: true });setInterval(fetchAndDisplay, 30_000);fetchAndDisplay();

import Board from './js/Board.js';import SoundEngine from './js/SoundEngine.js';
const board = new Board(document.getElementById('board'));const sound = new SoundEngine();
async function fetchAndDisplay() {  const res = await fetch('/api/departures');  const data = await res.json();  const message = `${data.flight}  ${data.destination}  ${data.gate}`;  board.setMessage(message.toUpperCase());  sound.play();}
document.addEventListener('click', () => sound.init(), { once: true });setInterval(fetchAndDisplay, 30_000);fetchAndDisplay();

Cycle through a custom message list

const promos = [  "SALE ENDS SUNDAY",  "FREE SHIPPING OVER $50",  "NEW ARRIVALS THIS WEEK",];
let i = 0;setInterval(() => {  board.setMessage(promos[i % promos.length]);  sound.play();  i++;}, 5000);

const promos = [  "SALE ENDS SUNDAY",  "FREE SHIPPING OVER $50",  "NEW ARRIVALS THIS WEEK",];
let i = 0;setInterval(() => {  board.setMessage(promos[i % promos.length]);  sound.play();  i++;}, 5000);

React/Vue wrapper (import as a module)

jsx

// FlipBoard.jsximport { useEffect, useRef } from 'react';import Board from '../flipoff/js/Board.js';import { MESSAGES } from '../flipoff/js/constants.js';
export default function FlipBoard({ messages = MESSAGES, interval = 8000 }) {  const containerRef = useRef(null);  const boardRef = useRef(null);
  useEffect(() => {    boardRef.current = new Board(containerRef.current);    let idx = 0;    boardRef.current.setMessage(messages[idx]);
    const timer = setInterval(() => {      idx = (idx + 1) % messages.length;      boardRef.current.setMessage(messages[idx]);    }, interval);
    return () => clearInterval(timer);  }, []);
  return <div ref={containerRef} className="flip-board-container" />;}

// FlipBoard.jsximport { useEffect, useRef } from 'react';import Board from '../flipoff/js/Board.js';import { MESSAGES } from '../flipoff/js/constants.js';
export default function FlipBoard({ messages = MESSAGES, interval = 8000 }) {  const containerRef = useRef(null);  const boardRef = useRef(null);
  useEffect(() => {    boardRef.current = new Board(containerRef.current);    let idx = 0;    boardRef.current.setMessage(messages[idx]);
    const timer = setInterval(() => {      idx = (idx + 1) % messages.length;      boardRef.current.setMessage(messages[idx]);    }, interval);
    return () => clearInterval(timer);  }, []);
  return <div ref={containerRef} className="flip-board-container" />;}

Troubleshooting

Problem	Fix
No sound	User must click/interact first; Web Audio requires a user gesture
Sound works locally but not deployed	Ensure `flapAudio.js` (base64) is served; check MIME types
Tiles don't animate	Verify CSS `tile.css` is loaded; check for JS console errors
Grid overflows on small screens	Reduce `GRID_COLS`/`GRID_ROWS` in `constants.js` or add CSS `overflow: hidden`
Fullscreen not working	`F` key calls `requestFullscreen()` — some browsers require the page to be focused
Messages cut off	String length exceeds `GRID_COLS × GRID_ROWS`; shorten or increase grid size
Audio blocked by CSP	Add `media-src 'self' blob: data:` to your Content-Security-Policy
CORS error loading modules	Serve with a local server (`python3 -m http.server`), not `file://`

Tips for TV / Kiosk Deployment

bash

# Serve with a simple static servernpx serve .              # Nodepython3 -m http.server   # Python
# Auto-launch fullscreen in Chromium kiosk modechromium-browser --kiosk --app=http://localhost:8080
# Hide cursor after idle (add to index.html)document.addEventListener('mousemove', () => {  document.body.style.cursor = 'default';  clearTimeout(window._cursorTimer);  window._cursorTimer = setTimeout(() => {    document.body.style.cursor = 'none';  }, 3000);});

# Serve with a simple static servernpx serve .              # Nodepython3 -m http.server   # Python
# Auto-launch fullscreen in Chromium kiosk modechromium-browser --kiosk --app=http://localhost:8080
# Hide cursor after idle (add to index.html)document.addEventListener('mousemove', () => {  document.body.style.cursor = 'default';  clearTimeout(window._cursorTimer);  window._cursorTimer = setTimeout(() => {    document.body.style.cursor = 'none';  }, 3000);});

來源與署名

來源：reason-machines/trending-skills位於skills/flipoff-split-flap-display提交2384a00

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Key	Action
`Enter` / `Space`	Next message
`Arrow Left`	Previous message
`Arrow Right`	Next message
`F`	Toggle fullscreen
`M`	Toggle mute
`Escape`	Exit fullscreen

Flipoff Split Flap Display

FlipOff Split-Flap Display Emulator

Installation

File Structure

Key Configuration — `js/constants.js`

Adding Custom Messages

Changing Grid Size

Keyboard Shortcuts

Programmatic API

Board

MessageRotator

SoundEngine

KeyboardController

Embedding FlipOff in Another Page

As an iframe

Inline embed (pull in just the board)

Custom Color Themes

Common Patterns

Show real-time data (e.g., a flight API)

Cycle through a custom message list

React/Vue wrapper (import as a module)

Troubleshooting

Tips for TV / Kiosk Deployment

來源與署名

更多來自 reason-machines/trending-skills 的技能

Yourvpndead Vpn Detection

X Mentor Skill Nuwa

Wildworld Dataset

Understand Anything Knowledge Graph

Webphysics Avbd Engine

Ui Ux Pro Max Skill

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design

Flipoff Split Flap Display

FlipOff Split-Flap Display Emulator

Installation

File Structure

Key Configuration — js/constants.js

Adding Custom Messages

Changing Grid Size

Keyboard Shortcuts

Programmatic API

Board

MessageRotator

SoundEngine

KeyboardController

Embedding FlipOff in Another Page

As an iframe

Inline embed (pull in just the board)

Custom Color Themes

Common Patterns

Show real-time data (e.g., a flight API)

Cycle through a custom message list

React/Vue wrapper (import as a module)

Troubleshooting

Tips for TV / Kiosk Deployment

來源與署名

更多來自 reason-machines/trending-skills 的技能

Yourvpndead Vpn Detection

X Mentor Skill Nuwa

Wildworld Dataset

Understand Anything Knowledge Graph

Webphysics Avbd Engine

Ui Ux Pro Max Skill

更多Design & Creative技能

Theme Factory

Slack Gif Creator

Frontend Design

Canvas Design

Brand Guidelines

Frontend Design

Key Configuration — `js/constants.js`