Split Flap Board
A real Solari departure board — four layers and a hinge, with reels that land apart because they travel different distances.
- Category
- Text Effects
- Added
- 2026-09-21
- Deps
- none
- Updated
- 2026-09-21
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Displacement Smear Type
text effectsA headline that smears along the pointer's direction of travel with a real accumulation blur.
Weight Wave Text
text effectsPer-character variable font weight that swells around the pointer and drifts when idle.
Whiplash Letters
text effectsA headline whose letters follow the cursor as a spring chain — crisp at the head, loose at the tail.