Hero219: Split-Flap Board Hero

A hero built around the split-flap component: a departure board of CSS 3D flaps that flick through random glyphs in a ripple before settling on each phrase, cycling through a list, above a headline, an intro, a primary Arrow Pill and an underline link.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero219?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero219?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero219.tsx plus the split-flap board and the button23 and button2 buttons it uses.

Quick start

The installed file exports hero219Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero219, hero219Demo } from "@/components/beste/block/hero219";

export default function Page() {
  return <Hero219 {...hero219Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero219 } from "@/components/beste/block/hero219";

export default function Page() {
  return (
    <Hero219
      eyebrow="Sleeper trains across Europe"
      heading="Close the curtain in one capital, open it in another."
      description="Private cabins, linen sheets and a dining car that stays open past midnight."
      buttons={[
        { label: "Find a cabin", href: "/cabins" },
        { label: "See all routes", href: "/routes" },
      ]}
      board={{
        phrases: ["Sleep in Paris, wake in Vienna", "Lisbon to Madrid, 22:05"],
        columns: 15,
        rows: 4,
        interval: 5200,
        uppercase: true,
      }}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
};

Behavior notes

• The board only renders when board is set and board.phrases has at least one entry; it sits in a rounded near-black panel with a faint inner ring, so the board reads as a physical object on any theme.
• Phrases wrap into rows automatically, each cell flips through up to flips random glyphs before settling, and stagger sets how far the ripple travels across the columns.
• Flips animate transforms only, from a single loop that sleeps between phrases and pauses offscreen; reduced motion shows the first phrase without flipping.
• The section ground, text and buttons follow the theme tokens (bg-background, text-foreground, text-muted-foreground, primary pill); only the board keeps its own flap, ink and split colors.
• The eyebrow, board, headline and the intro column rise in on mount at 0s, 0.1s, 0.3s and 0.45s; reduced motion shows them in place.