ComponentsCursor
Flip roll
Hover and the label rolls up into a fresh copy.
Installation
$ npx shadcn@latest add @textlab/flip-rollNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { FlipRoll } from "@/components/textlab/flip-roll/flip-roll";
<a href="/contact" className="inline-flex"><FlipRoll text="Get in touch" /></a>Variants
staggerupdownProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "stagger" | "up" | "down" | "stagger" | Roll letter by letter, or the whole label up or down. |
| duration | number | 0.6 | Seconds per roll. |
| stagger | number | 0.02 | Seconds between letters. |
| ease | EaseName | [number, number, number, number] | "emphasized" | Easing token or cubic bezier. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Navigation links, buttons and footer links.
- Any short label that deserves a tactile hover.
Skip it
- Long labels; the stagger tail drags.
- Inline links in body copy.
Accessibility and motion
Accessibility
- Keyboard focus inside triggers it, through focus capture.
- Screen readers read the label once.
Motion
- A long-tailed ease over 0.6s with a cross-fade, so it starts quick and lands soft.
- Leaving reverses immediately, interrupting cleanly.
Reduced motion. Hover changes nothing.
Performance
- CSS transitions on transform only.