Split Flap Board 2.0
A working Solari departures board in WebGL: lit hinged leaves that fall, shadow and bounce, statuses that roll from boarding to departed, a flap clock, a destination search that re-flaps the board, and opt-in clatter.
WebGL20 deps1 file · 41 KB TSXreduced-motion aware
Props
"use client"; /* * SplitFlapBoard2: a working Solari departures board. * * Every character is a reel of hinged leaves drawn in WebGL2: the leaf in * front carries the top half of the old character on its face and the bottom * half of the new one on its back; it falls toward you on the hinge, lit from * above (its face darkens as it tips, its back brightens as it lands), casts a * shadow on the half below, and bounces when it hits the stop. Reels travel * different distances to their next character, so a board lands in a ripple, * never a fade. * * The board runs itself: statuses roll from ON TIME through BOARDING, FINAL * CALL and GATE CLOSED to DEPARTED, then the flight leaves and every row below * it flaps up a line; the clock in the corner flaps each minute. Type a * destination and the board re-flaps to the flights that match. Sound is * opt-in: each landing leaf clicks, so a whole board changing is the clatter. // --------------------------------------------------------------- // Full source available with a viberdy Pro subscription. // https://viberdy.dev/pricing // --------------------------------------------------------------- }
Details
About this section
A Solari departures board that runs itself. Every character is a reel of hinged leaves: the leaf in front carries the old character's top on its face and the new one's bottom on its back, and it falls toward you on the hinge, lit from above, so its face darkens as it tips and its back brightens as it lands; it throws a shadow on the half below, and bounces off the stop before it lies still. Reels only turn forward, so each travels its own distance and the board lands in a ripple, never a fade. The departures move on their own: the first flight rolls from boarding to final call, gate closed and departed, the next one starts boarding as its gate closes, and when a flight leaves every row below flaps up a line while a new one joins at the bottom. The clock in the corner flaps each minute. Type a destination or a flight number and the board re-flaps to the flights that match, with the header reading where you are going. Remarks are coloured by status. Turn Sound on and every landing leaf clicks, so a whole board changing is the clatter of a real hall. The board has three layouts by width (with flight and gate columns on wide screens, and when, where and what now on a phone).
Curator’s note
Split Flap Board, rebuilt as a premium 2.0 beside the original. The first one flips a single word in CSS; this one is the whole board: instanced WebGL2 leaves on real hinges, lit and shadowed, a departures engine, a flap clock, search and synthesised clatter. One file, no dependencies.
