Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Split-Flap Display

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

Text layer, V4 Titles3D318 lines of codev1.0.1

In Machines & clockwork, Space & cosmos, Craft & heritage, Text & data

Next: AstrolabeSurprise me

Split-Flap Display preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Open in the title maker

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

Use | to start a new line (up to 3 lines).

A second message to flip to. Leave empty to keep the first.

4.6
18
0.035

Delay from one column to the next, in seconds.

0

0 fits the longest line.

1

Changes when each module starts.

The preview runs the same code your AI receives. These settings travel with the hand-off.

View code Sample video (default settings, 712 KB)
Info

What it is

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.

Reuse it in your own idea

  • 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.

Which part is reusable

src/split-flap.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses chrome-material only for the demo.

Good to know

  • 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.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/split-flap.js
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() }
  • splitLines(text) => string[]
  • toDrum(text) => string[]
  • DRUM: string
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.
How it fits a scene

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.

Output
1080×1080, 30 fps, 9 s · procedural (computed from the frame number) · not a loop — Starts blank, spells the first message, then flips to the second and holds.
Tested
Rendered 270 frames on 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)). Same frame twice from fresh pages: identical.
Performance
One shared texture and a few hundred small meshes; only the flaps that are moving change each frame. Smooth at 1080p on laptop GPUs. Best up to about 4 rows of 24 columns. Software WebGL (no GPU) renders slowly with shadows on.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- split-flap/1.0.1 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.1 · sha256:5f6cbd920a6b6812… · other versions: 1.0.0
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT). License details
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.
BinMore like this

More like this

Play these full screen

Astrolabe

3D object3DSeamless loop16 seconds

Music Box

3D object3DSeamless loop12 seconds