Skip to content

Split-Flap Board

anime.js

A departures board for jobs. Each changed cell spins through glyphs, staggered by column and row.

  • EMBED SUPPORT-QA OK
  • RERANK TOP-14 OK
  • EVAL TOOL-USE RUN
  • DEPLOY ATLAS-M HLD

Install

$ npx shadcn@latest add https://spotcheckui.com/r/split-flap.json

Also installs animejs.

Usage

import { SplitFlap } from "@/components/spotcheck/split-flap"

<SplitFlap
  rows={jobs}
  width={22}
  columns={[{ label: "Job", start: 0 }, { label: "Target", start: 8 }]}
  accentCharacters={3}
/>

Pass new rows and only the cells that differ will spin. Keep the number of rows the same between updates.

Props

  • rows * Requiredstring[]Default —One string per row. Keep the number of rows the same between updates.
  • widthnumberDefault 22Characters per row.
  • columnsFlapColumn[]Default []Column headings, each starting at a character position.
  • accentCharactersnumberDefault 0How many characters at the end of each row take the accent.
  • classNamestringDefault —

Keyboard

TabFocus the board so it can be scrolled

Reduced motion

Changed cells update at once.