The brain looks at things that rearrange themselves. Split-flap is familiar enough to read instantly, novel enough on the web to feel custom, and the flutter is just plain fun to watch. Cycle a launch date, a status line, and a tagline through it and your hero turns into something visitors sit and watch.
Train station boards, airport timetables, the NYSE. Putting your tagline behind that animation reframes plain text as an editorial object with weight. Works for retro brands, music, fashion, fintech, travel. Dark and light themes ship in the component, accent color drives the type.
- Each column is a real flap stack with separate top and bottom halves, rotated on `rotateX` with `preserve-3d` and `backfaceVisibility: hidden`.
- Per-column GSAP timeline rolls through the charset until it lands on the target letter. Bottom-half momentum lags the top-half flip for that "this has hinges" feel.
- Subtle inner light and shadow tweens at the flip midpoint, so the leaf catches light as it crosses center.
- Configurable random stagger across columns, so the message never resolves uniformly. All timers and tweens clean up via `gsap.context` and an `alive` guard.
Hero status banners, coming-soon and waitlist screens, editorial/music/fashion brands, travel and transit sites, live-status displays.
- Messages: array of strings, cycles with dwell pauses
- Charset: character pool the flaps roll through
- Flip Speed: 20 to 300ms per flap
- Stagger: 0 to 300ms across columns
- Font Size: 16 to 120px
- Accent: character color
- Columns: fixed width, or `0` for auto-fit
- Dwell: 200 to 10000ms per message
- Theme: dark or light
Stays static on Framer's canvas. Respects `prefers-reduced-motion`. Real CSS 3D transforms with backface culling. Wraps gracefully on narrow screens. Polite live region for screen readers.
Abhrajit Ray
