Future UI

Split-Flap Display

▣ Displays

Airport departure board display with mechanical flip animations per character.

displaysplit-flapairportfliptextanimationgsap3d

No preview available

GSAP + CSS 3D ~ Separate messages with |

Controls

48
60
80
2000

Time each message stays visible before transitioning

#ff7657

Displays / React Component

About Split-Flap Display

Airport departure board display with mechanical flip animations per character.

Category Displays
Framework React + TypeScript
Dependencies gsap, @gsap/react
Tags display, split-flap, airport, flip, text, animation, gsap, 3d

Install Split-Flap Display in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/split-flap-display.json?key=YOUR_LICENSE_KEY"

Usage example

import { SplitFlapDisplay } from './SplitFlapDisplay';

export default function Example() {
  return (
    <SplitFlapDisplay
      text="HELLO | WORLD | SPLIT FLAP"
      speed={60}
      stagger={80}
      fontSize={48}
      accentColor="#f5f5dc"
      dwell={2000}
      theme="dark"
    />
  );
}