daformat

daformat / react-split-flap-display

Public

A zero-dependency React split-flap display component, like the ones you'd see in old train stations and airports

hello-mat.comdesign-engineeringcomponentsplit-flap-display react reactjs split-flap split-flap-clock split-flap-display
10
0
100% credibility
Found May 11, 2026 at 10 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A React component library for creating animated split-flap displays that mimic vintage airport and train station boards with realistic 3D flipping effects.

How It Works

1
🔍 Discover the Flip Display

You find a cool tool online that makes old-school airport-style letter boards with flipping letters.

2
🎬 Watch It in Action

You check out the live demo and see letters flipping smoothly in 3D, feeling nostalgic and excited to add it to your site.

3
📦 Add to Your Page

You copy a simple snippet to bring the display onto your webpage.

4
✏️ Set Your Message

You type in words like 'HELLO' or numbers for a clock, and decide how many slots to use.

5
🎨 Customize the Look

You pick colors, size, flip speed, and character sets to fit your style perfectly.

6
✨ Trigger the Flip

You change the text and watch each letter rotate through the set with realistic flaps.

✅ Retro Magic Alive

Your site now features a delightful animated board that grabs attention and feels alive.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 10 to 10 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is react-split-flap-display?

This TypeScript React component builds split-flap displays like the ones you'd see in old train stations and airports, where characters flip through a set with smooth 3D animations powered by CSS. Drop it into any React 18+ app with zero dependencies—just pass a value, fixed length, and character sets to get a mechanical flap display that handles padding, truncation with ellipsis, and per-slot custom characters for clocks or scores. Install via npm or yarn, style with data attributes or compose layers for Tailwind integration.

Why is it gaining traction?

It stands out with hardware-accelerated pure-CSS flips that mimic real mechanics, firing a callback only when all slots settle for chaining effects. The compound API lets you override any layer without fighting defaults, plus CSS variables expose animation state for easy theming. Full TypeScript types and browser support make it plug-and-play for retro vibes without bloat.

Who should use this?

Frontend devs crafting dashboards, live scoreboards, or clocks needing alphanumeric flips. UI engineers on design systems wanting airport-board effects in React apps. Prototypers eyeing nostalgic displays for games or terminals.

Verdict

Solid for small features or proofs-of-concept—docs are thorough with demos and examples, tests cover edge cases—but only 10 stars and 1.0% credibility signal early maturity; watch for adoption before production scale. Try it if split-flap React components fit your retro UI needs.

(178 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.