Split Flap Board
A real Solari departure board — four layers and a hinge, with reels that land apart because they travel different distances.
DOM + CSS0 deps1 file · 7 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef } from "react";
const SETS: Record<string, string> = {
letters: " ABCDEFGHIJKLMNOPQRSTUVWXYZ",
alphanumeric: " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",
symbols: " ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.,:-/",
};
type Cell = {
root: HTMLElement;
st: HTMLElement;
sb: HTMLElement;
lt: HTMLElement;
lb: HTMLElement;
cur: number;
target: number;
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this text effect
Almost every split-flap on the web is a crossfade with a flip-looking easing curve, and it never quite convinces because the mechanism is missing. A real Solari cell is four layers behind a hinge: the static top half already showing the next glyph, the static bottom half still showing the current one, and two leaves that rotate about the hinge in sequence — the old glyph's top falling away, then the new glyph's bottom swinging down over it. Half glyphs come from clipping a full-height character inside a half-height box, and the hard hinge line across the middle is what stops the two halves reading as a single letter. The character of the animation comes from somewhere people rarely look: the stagger is not authored at all. Each reel starts a different number of characters behind its target and steps forward until it arrives, so cells land at different moments because each has further to travel. Author the same travel for every cell with a per-cell delay and you are back to a fade. Two details keep it honest under load: stepping is driven by elapsed time rather than one flap per frame, which otherwise doubles the speed on a 120Hz display, and glyph text is written only when it changes rather than every frame across every cell.
Curator’s note
The stagger is not authored. Each reel starts a different distance behind its target, so they land apart on their own.
