Text rollPro
A vertical roll swap for short status labels, clipped to one line, 150 ms.
On this page
ProA job's status rolling through its steps, in a row and in a badge.
Installation
Usage
import { TextRoll } from "@/components/ui/chatcn/pro/text-roll"
<TextRoll value={status} />Examples
States
ProCounting back, inside a button and a slower roll.
Props
| Prop | Type | Notes |
|---|---|---|
value | string | The current label |
direction | "up" | "down" | down rolls back, for counting down. Default up |
duration | number | Enter ms. Exit is 0.75 of it. Default 150 |
announce | boolean | Polite announcement of changes. Default false |
Accessibility
Only the current label is read; the outgoing copy is hidden. Turn on announce when the label is the only place a change shows up.
Motion
The old label leaves upward while the new one arrives from below, transform and opacity only, on the kit's ease out. Reduced motion keeps a quick crossfade.