Skip to content

Split Flap

A mechanical station departure board whose flaps clatter through letters before spelling your launch.

16:9Medium pace8smechanicalnostalgicprecise

Launch and announcement style built on a split-flap (Solari) departure board. A black housing holds rows of individual flap cells with a hairline split; each character flips through the letters before it on the drum, its top half folding down in 3D, staggered across the board. Columns read TIME / DESTINATION / PLAT / STATUS in amber, destinations are playful metaphors, one status glows green and BOARDING blinks, a station clock ticks, the top train departs and the rows shuffle up, and finally the whole board re-flips from the centre out to spell the product name and tagline.

Use this style

With Frame Jam installed, press Use this style in the local gallery, or just ask your agent:

Make a video with the Frame Jam style "split-flap" and open it for review.

style.json Install Frame Jam

Palette

wall#15171a

housing#0a0a0a

bezel#26282b

flap#1c1c1e

character#efece4

amber#ffb000

onTime#3ddc84

cancelled#8d8a83

clockFace#f4f1ea

platformLine#f2c200

Type

Display: Barlow Condensed 500, 600, 700Flap characters 600 at 64px centred in 48×80px cells on a 53px pitch; board title 700 at 64px; column heads and labels 22–26px tracked 0.2em
Body: Barlow Condensed 600Amber ticker strip 32px tracked 0.16em, scrolling at 140px/s

Motion

Flip: linear halves: top flap rotateX 0→-90°, then bottom flap 90→0°, 0.065s per character
HousingIn: power3.out
Drift: sine.inOut
ClockMinute: jump with a damped overshoot
Average shot: 2.6s

Three board states in 8s: departures at 0.5s, rows shuffle at 3.7s, product reveal at 5.6s. Each re-flip takes ~1.2s of clatter, then the board holds while the clock, ticker and blinking status keep it alive.

Transitions and text

no cuts: the board itself is the transition, re-flipping row by row
departure: the top row leaves and every row re-flips to the next row's content
finale re-flip staggers outward from the centre column
each cell flips through 3–8 preceding drum characters (deterministic per cell) before landing
phase stagger: 0.014–0.016s per column + 0.09–0.1s per row; finale 0.022s per column from centre
BOARDING blinks at 1.2Hz once its flaps settle; ON TIME is green, CANCELLED dimmed
station clock second hand sweeps, minute hand jumps on the minute

Style guide your agent follows

Every character lives in its own 48×80px flap cell (#1c1c1e top, darker bottom, 5px radius) with a 2px black split line and tiny hinge pins; cells sit on a 53px pitch inside a #0a0a0a housing with a #26282b bezel. Never use LED dots or glowing pixels.
Flip by rendering from time: top half (old char) rotates 0→-90° from its bottom edge, then the bottom half (new char) rotates 90→0° from its top edge, 0.065s per character, with perspective ~340px. Drive it from one timeline proxy's onUpdate so every frame is seekable.
Characters walk the drum (" A–Z 0–9 : . - ·"), passing 3–8 letters before the target; pick the count from the cell index, never Math.random().
Layout rows as TIME (amber) / DESTINATION / PLAT / STATUS with blank cells as column gutters. Destinations are metaphors (SHIPPED, INBOX ZERO, CODE REVIEW). Only statuses get colour: ON TIME #3ddc84, BOARDING amber blinking, CANCELLED dimmed.
Keep the board alive between flips: clock second hand sweeping, minute hand jumping with a small overshoot, an amber ticker scrolling at ~140px/s.
End by re-flipping the whole board from the centre out: product name in white, tagline in amber, URL line in green; fade the column heads to 20%.