# Split-Flap Display — `split-flap@1.0.1`

Your message on an airport departure board, every letter flipping into place, then changing to a second message.

A split-flap board like the ones in old stations and airports. Each little module flips through its letters, the flaps falling and slapping down, until your words settle in a ripple from left to right; then the board flips on to a second message. Type up to three lines for each message, pick the flap and letter colours, the flip speed, and a straight-on or angled view.

- Kind: text; status: published; digest sha256:5f6cbd920a6b681292e4389a364db35b357c99a01401087a8d28e27d8fa11166
- Role: Title or sign (Three.js 3D): a split-flap board that spells and changes your message.
- Implementation: three; entry `src/split-flap.js`
- Files: https://aipixelwizard.com/registry/split-flap/1.0.1/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`, `src/split-flap.js`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/split-flap/versions/1.0.1
- Runnable demo: https://aipixelwizard.com/registry/split-flap/1.0.1/index.html (open over http; it imports sibling packages by relative path)
- Dependencies (exact): `three@0.185.1` (source) — Renderer, geometry and materials.; `chrome-material@1.1.0` (demo) — Studio environment light for the demo.; `apw-runtime@1.0.0` (demo) — Demo harness.

## Exports
- `createSplitFlapBoard({ messages, times?, rows?, columns?, align?, flipRate?, ripple?, jitter?, flapColor?, textColor?, housingColor?, fontFamily?, seed?, anisotropy? }) => { group, width, height, rows, columns, settledAt, update(time), dispose() }` — The board as a THREE.Group centred at the origin, facing +z; update(time in seconds) every frame.
- `splitLines(text) => string[]` — 'NOW BOARDING|GATE 12' → ['NOW BOARDING', 'GATE 12'].
- `toDrum(text) => string[]` — Text as the characters the drum has (capitals, accents dropped, the rest blank).
- `DRUM: string` — The characters on every module, in flipping order.

## Parameters
- `text1` (text, default "NOW|BOARDING|GATE 12") — First message: Use | to start a new line (up to 3 lines).
- `text2` (text, default "FINAL|CALL|LISBON") — Then: A second message to flip to. Leave empty to keep the first.
- `changeAt` (number 2–8, default 4.6) — Change at (seconds)
- `flapColor` (color, default "#1d1d21") — Flap colour
- `textColor` (color, default "#f2eee4") — Letter colour
- `speed` (number 8–30, default 18) — Flips per second
- `ripple` (number 0–0.12, default 0.035) — Ripple: Delay from one column to the next, in seconds.
- `columns` (integer 0–24, default 0) — Columns: 0 fits the longest line.
- `align` (select one of center | left, default "center") — Alignment
- `camera` (select one of angled | front, default "angled") — View
- `seed` (integer 1–9999, default 1) — Variation: Changes when each module starts.

## Composition
- Inputs: Messages (lines of text) and when each starts. Time in seconds for each frame.
- Outputs: A THREE.Group: the board with its housing, centred at the origin and facing +z.
- Coordinates: World units: each module is 0.62 wide and 1 tall, 0.7 apart; width and height report the whole board.
- Lighting: Standard materials: light it like any scene (one shadow-casting light shows the falling flaps best). The demo adds the studio environment from Chrome Material.
- Timing: update(time) is a pure function of time. settledAt tells you when every module has stopped.
- Works with: chrome-material, orbit-camera, stop-motion-feel
- Messages are treated as private: not stored in shared packs unless you choose to include them.
- Letters are drawn with the system's bold sans-serif (Helvetica or Arial where present); pass fontFamily and load the font first for identical renders.
- Each module flips forward through the drum (blank, A–Z, 0–9, punctuation), so letters further along take longer, as on a real board.

## Output and loop
- 1080×1080, 30 fps, 9 s, procedural
- Seamless loop: no — Starts blank, spells the first message, then flips to the second and holds.
- Verified 2026-10-08 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)); deterministic: yes

## Use it
New project: Create a scene with a light, add createSplitFlapBoard({ messages }).group, and call board.update(frame / fps) before each render.

Existing project: Copy src/split-flap.js. Add the group to your scene, scale or rotate it as you like, and call update(time) every frame.

Reuse ideas:
- Trip video opener: your destination and date as the first message, "NOW BOARDING" as the second.
- Score update: two messages that differ by one digit; only that module flips.
- In a 3D scene: add board.group to a wall in your own scene and light it with a spotlight.

## Limitations
- Capital letters, digits and common punctuation only (as on a real board); other characters show as blanks.
- No sound: add the clatter in your editor.

## License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.
- three.js 0.185.1: MIT (https://github.com/mrdoob/three.js)

Provenance: Adapted from the owner's threejs-sketches/mechanical-kinetic/flip-clock (MIT), rebuilt for AI Pixel Wizard in October 2026 as a full split-flap board for your own messages: a character drum per module, gravity-eased flaps with a settling bounce, a left-to-right ripple, a second message, and the frame/time contract.