Split-Flap Departure Board Landing Page

A whole landing page built on a station's departure board: a flipping split-flap headline, a live shipment board, features as stops on a route, pricing printed as tickets and a last-call footer.

npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Features

Split-flap text that flips through letters and lands left to right, in the navbar, the headline, the board and the footer
A live departure board where one shipment's status moves on at a time and only that cell flips
Ticket-cut buttons with a perforation and notches; the stub tears a little away on hover
Features as stops on a route: a train runs stop to stop on its own until a visitor picks one
Pricing printed as tickets with a perforated stub and barcode, monthly or yearly
Holds still off screen and for reduced motion; keyboard reachable with visible focus

Best for: Logistics, travel, scheduling and booking products that want a landing page nobody else has, built around one strong metaphor.

Installation

npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-merge

Then copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.

Props

Prop	Type	Default	Description
content	TransitContent	-	Everything the page says: brand, nav, hero, departures, route stops, fares and the closing board.
className	string	-	Classes on the page.

FAQ

Is the Split-Flap Departure Board Landing Page free to use?

Yes. Split-Flap Departure Board Landing Page is free to copy into your own projects. Open the Code tab and paste the files into your app.

Does Split-Flap Departure Board Landing Page 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 Departure Board Landing Page in JavaScript instead of TypeScript?

Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.

What does Split-Flap Departure Board Landing Page need installed?

motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.

Is Split-Flap Departure Board Landing Page 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.