Gatewise
Gatewise
A giant split-flap departure board is the app: the flaps flip in a wave, the search types a city and its row lights, the fare drops and a boarding pass lifts off the phone.
A night airport hall with a giant split-flap board over a mirror floor between tall columns, flaps flipping in waves under warm low light, then a dark planet with a glowing rim and a bead-strung route under a streak of light. Six quick cuts of about 2.5 s over 15.4 s at about 125 bpm: a low tracking wave, tight pushes, a turn to camera, the planet beat, and a single flap turning over to land.
- Length
- 15 s
- Scenes
- 6
- Device
- iphone
- Style
- hyperkinetic
- Camera
- fast cuts, low angle, tracking, push in, pull back
//
GATEWISE — "Your gate, before you ask." ~15.4 s, 16:9, six chapters cut on short shader
transitions. 1 unit = 1 mm.
Preview: http://localhost:4444/runtime?project=projects/templates/gatewise/gatewise.promo
THE IDEA — a travel booking app sold through the one object every traveller reads: the split-flap
departure board. The board turns over, you ask it for Lisbon, the row lights, the fare drops on
your phone, the boarding pass lifts off the glass, and the flight draws itself over the planet.
WORLD — a night airport hall. A giant departure board of 30 × 12 flaps (6 × 4.45 m) on a black
wall over a mirror floor, a ceiling of warm light strips, black columns with cool edge lights, and
taxiway lamps on the floor. Every flap is one `repeat` instance (no textures); the letters are
JetBrains Mono text3d at size 300 with tracking 66.67, so one glyph advance is exactly one
200 mm flap. Each row carries two text fields (city · time/flight/gate) whose `flip` reveal is
timed to the flaps under them. The CTA leaves the hall for a black planet with an amber rim.
PALETTE — night #05070b · flap #24272e · warm white #f4eee1 · departures amber #ffb020 ·
steel #9aa3b2 · cool edge light #a9bdff (the columns only) · pass paper #f6f1e6 · ink #12141a.
LIGHT — low-key: hemisphere ≤ 0.2 + studio_small_04_2k at ≤ 0.45; one broad warm area key on the
board so the flaps catch a sheen as they turn; amber area light grazing the floor. film_grain
output_transform=2 (UI hex prints as authored), unreal bloom on the letters and lamps, SSAA ×4,
DOF (dof_pass=three) on every 3D chapter, an amber lens flare on each hot source.
HUD — none on purpose: the board is the information layer (DEPARTURES · the clock · the header
row). It carries across s1–s4 as the set and as the bokeh behind the phone.
SCREENS — gatewise.screens.html (Tailwind only) → scripts/html-screens.mts → gatewise.screens.json,
pasted below unchanged; only tracks added (and the stage line on the device).
BEATS (scene · local seconds; every scene after the first starts with its 0.2 s incoming gap)
s1-board 2.8 HOOK low under the board's left end; the flaps turn over in a wave left →
right (0.35 → 1.8), old departures flip out, new cities flip in; the
lens tracks the wave and swings out wide over the mirror floor.
s2-search 2.6 FEATURE a glass search bar floats before the board; "Lisbon" types
(0.15 → 0.7), search pressed (0.8), the match drops under it (0.95);
the board dims and row 07 turns over to amber (1.15 → 1.9); the lens
racks off the bar onto the row.
s3-fare 2.3 PROOF the iPhone floats in front of the lit row (bokeh); the fare ticks
$412 → $389 (0.55) → $349 (1.05) with the −$63 chip; Book (1.85),
Booked (2.0).
s4-pass 2.3 PROOF the boarding pass lifts off the glass (0.15 → 1.0), turns to the lens,
and the lens pushes onto GATE B12 (1.5 →).
s5-route 2.0 CTA a black planet; JFK → LIS draws itself as 70 amber beads over the
curve (0.25 → 1.45), a light streak flies it as the plane.
s6-end 2.4 the mark (a split-flap tile) turns over, G flips in, Gatewise ·
Your gate, before you ask. · gatewise.app over the amber rim.
promo#gatewise(width=1920 height=1080 fps=30 gap-clock=run)
audio
tracks
track#music(asset="music:gatewise-score" start=0 duration=15.4 volume=0.85)
track#sfx_1(asset="media:gatewise-sfx" start=0 volume=0.9)
materials
// the letters: unlit warm white / amber so they print as authored and bloom a little
basic#m-flap-ink(color=#f4eee1 transparent=true opac