Split-Flap Board
A departures board that flips to the section you're reading.
Features
- Letters flip like an airport departures board
- Shows the section you're reading in real time
- Full menu opens from the board
- Pure CSS 3D flaps with reduced-motion fallback
Best for: Brands with a playful, mechanical feel, travel and events sites, or any page where the current section should be the hero.
Installation
npm install motion @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logo | ReactNode | - | Your logo. It inherits currentColor. |
| items | NavItem[] | - | One link per section, in page order: label and #id href. |
| cta | { label: string; href: string } | - | Optional call-to-action button. |
| className | string | - | Extra classes for the outer element. |
FAQ
Is the Split-Flap Board navbar free to use?
Yes. Split-Flap Board is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Split-Flap Board work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Split-Flap Board in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Split-Flap Board need installed?
motion, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Split-Flap Board accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.