Pro
Roll button
A button whose label rolls on hover: each letter slides up while its copy rises from below, a few milliseconds after the one before, so the word turns over like a counter. Keyboard focus rolls it too.
pnpm dlx shadcn@latest add @caliper/roll-buttonWhen to use
Use it for
- The main call to action on a marketing page.
- One button that should feel alive without moving on its own.
Skip it when
- Rows of buttons in product UI; the roll repeated becomes noise.
- Labels that change, such as Save and Saved.
Decisions
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Read once
- The letters are presentation; the button's name is the plain label, so it is not spelled out letter by letter.
- Touch does not stick
- On touch screens the hover state is ignored, so a tap never leaves the label half rolled.
Installation
pnpm dlx shadcn@latest add @caliper/roll-button
Adds its 3 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.
import { RollButton } from "@/components/ui/roll-button"
The worked example comes with Pro
The 31-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
RollButton
component
Also accepts the native props of its root element and a ref.
Accessibility
It is built on native elements and keeps aria-label and aria-hidden 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
- ButtonA familiar action with immediate focus, a tactile press, and optional pending or label feedback that stays on the button itself.
- MagneticWraps one button or link so it leans toward the pointer as it comes near, up to 8px, and settles back when the pointer leaves.
- Action buttonA button that runs async work and reports progress, success or failure on itself, at one width.