Pro
Flip dots
A flip-disc sign: round dots with an ink face and a blank face that flip over, column by column, to spell each message. A message that fits sits centred for a few seconds; a longer one scrolls through one column at a time.
pnpm dlx shadcn@latest add @caliper/flip-dotsWhen to use
Use it for
- Departure boards, queue numbers, status signs and launch banners.
- Short, all-caps messages that should feel physical.
Skip it when
- Long or mixed-case text; the 5 × 7 font is capitals, digits and common punctuation.
- Information that changes faster than it can be read.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Coils fire in turn
- A new message sweeps in from the left with a little scatter; scrolling moves one column a step, as real signs do.
- Messages, not dots
- Assistive technology reads the messages; the pause button stops the cycle and under reduced motion the first message stands still.
Styling
- Discs turn on an axis
- A flipping dot thins to an edge and the other face comes round, so a change reads as a sweep of tiny mechanical flips, not a fade.
Installation
pnpm dlx shadcn@latest add @caliper/flip-dots
Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage
Import it from your copy of the source. The example behind the preview comes with the source. It is built from FlipDots and dotColumns.
import { FlipDots, dotColumns } from "@/components/ui/flip-dots"
The worked example comes with Pro
The 25-line example behind the preview opens here, ready to copy.
- 576 Pro parts, blocks and page templates, all with source
- $199 once, with a year of updates. What you have stays yours
- A full refund within 14 days if it is not for you
API reference
FlipDots
component
Also accepts the native props of its root element and a ref.
dotColumns
component
No props of its own; it accepts the native props of its root element.
Accessibility
It exposes img semantics, with aria-label and aria-pressed kept in step with state.
No custom key handling; Tab and the native activation keys do the work.
Motion
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.
Related
- Split flapA departure-board display: when the text changes each character flips through the reel to its new letter, left to right.
- MarqueeA slow scrolling row of content that pauses on hover.
- Scramble textText that decodes into place: each letter flickers through a few glyphs and settles, left to right. The finished words sit underneath holding the width, so nothing moves, and they are what a screen reader reads.