Split-Flap Board

Component

About

A skeuomorphic split-flap departure board in React: each character flips to its new value, column by column. For deploy status, queues and live boards. Accessible, reduced-motion aware.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Split-Flap Board to your project and fits it to your theme.

Code

How Split-Flap Board is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"
import { SplitFlap, SplitFlapRow, SplitFlapText } from "@/components/ui/split-flap"

const regions = ["US-EAST", "US-WEST", "EU-WEST", "AP-SOUTH"]
const stages = ["QUEUED", "BUILDING", "TESTING", "ROLLOUT", "LIVE"]

/** A deploy board. Each region's status flips over as its rollout moves on. */
export function SplitFlapDeploys() {
  const [at, setAt] = React.useState([4, 2, 1, 0])

  React.useEffect(() => {
    const timer = setInterval(() => {
      setAt((all) => {
        if (all.every((s) => s === stages.length - 1)) return [0, 0, 0, 0]
        const open = all.map((s, i) => (s < stages.length - 1 ? i : -1)).filter((i) => i >= 0)
        const pick = open[Math.floor(Math.random() * open.length)]!
        return all.map((s, i) => (i === pick ? s + 1 : s))
      })
    }, 2200)
    return () => clearInterval(timer)
  }, [])

  return (
    <SplitFlap aria-label="Deploys">
      {regions.map((r, i) => (
        <SplitFlapRow key={r} name={r}>
          <SplitFlapText value={r} length={8} />
          <SplitFlapText value={`V2.${14 + (at[i]! > 3 ? 1 : 0)}`} length={5} />
          <SplitFlapText value={stages[at[i]!]!} length={8} tone="amber" />
        </SplitFlapRow>
      ))}
    </SplitFlap>
  )
}

export default SplitFlapDeploys