Interactions that make it
feel expensive.

Installation

1. 01

   Have shadcn/ui set up

   Any style. The components read its theme variables (background, foreground, primary, border), so they look like the rest of your app.

   $ npx shadcn@latest init

   Copy
2. 02

   Add a component

   One file lands in your components folder, with the keyframes it needs added to your CSS and any component it builds on installed too.

   $ npx shadcn@latest add https://hairlineui.com/r/number-roll.json

   Copy
3. 03

   Use it

   import { NumberRoll } from "@/components/number-roll";
   
   <NumberRoll value={downloads} />
   <NumberRoll value={price} format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }} />

   React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style). Icons from lucide-react.

• 01Text morphText that changes the way it should: shared letters slide over, new ones rise out of a blur, the width eases.In 11 templates
• 02Status buttonSave, Saving, Saved: the spinner opens in, the check draws itself, errors shake, and the label morphs between them.
• 03Number rollNumbers that change like an odometer: every digit rolls in the direction the number moved.In 7 templates
• 04Pricing toggleMonthly or yearly: the thumb slides with a little give, and every price on the page rolls to its new amount.
• 05Waitlist fieldAn email field that becomes its own answer: the button stretches across it, then settles as "You’re on the list · #1,248".
• 06Code inputThe six boxes, done properly: digits rise in, a paste cascades, a wrong code shakes and clears, the right one becomes a pill with a check.
• 07Steps formA multi-step form in one card that changes shape: steps slide in from the way you’re going, checks shake and explain, and Create turns into what comes next.
• 08Date range pickerA range is one liquid band: it follows your pointer between days, presets flow it to their span, and the dates morph as it moves.
• 09Morphing navOne dropdown that follows you along the menu, gliding and resizing to each item’s content.
• 10Feature tabsOne panel, many features: the line slides between tabs, fills as autoplay runs, and the panel eases to each.
• 11Scroll storyA how-it-works section that tells itself as you scroll: steps light up at the middle, a rail fills, and one card reshapes into each step’s picture.
• 12Stats bandNumbers that arrive when you do: hairlines draw themselves, then each figure rolls up from zero in turn.
• 13Announcement pill"New: …" above your headline that opens into the news: the pill itself grows into a changelog card.
• 14TestimonialsOne quote, chosen by its people: faces step forward, the words cross-fade through a blur, a ring keeps time.
• 15FAQ accordionQuestions on hairlines that open like they mean it: the answer eases to its height, the plus folds into a minus.
• 16Logo marqueeA quiet strip of logos that notices you: it eases to a stop on hover and the logo you point at stays bright.
• 17Command palette⌘K that grows out of the search pill: fuzzy search, nested lists, and commands that run in place.
• 18Toast stackNotifications that stack, fan out on hover, follow a promise in one toast, and swipe away.
• 19Live activityOne pill for whatever is happening now: it updates in place, tap it and it grows into a panel, done blurs into a check.
• 20Live cursorsOther people’s cursors gliding over the same page: names that turn into speech bubbles, click ripples, and selections that follow them around.
• 21Live mapThe world as dots, lighting up where things happen: pings ripple, the light lingers, and one card follows the newest event from city to city.
• 22Theme toggleThe sun sets into a moon, and the new theme spreads from the button in a circle.
• 23Pricing calculatorDrag to your size and watch the price roll, the plan morph and, at the top, “Let’s talk”.
• 24Comparison tablePlans side by side, with a column that glides to the plan under your pointer and prices that roll.
• 25Onboarding checklistThe first five things, ticked off in place: a ring that fills, checks that draw, and a finish worth seeing.
• 26Sortable listDrag to reorder and everything moves: rows slide out of the way, the dropped one settles, every rank rolls, and presets re-sort the lot.
• 27Changelog timelineWhat shipped, drawn as you read: a rail that fills, dots that light, filters that fold the rest away.
• 28Changelog traceNewWhat shipped, routed like a circuit: the line steps aside between releases, and a bead runs down it as you read.
• 29Changelog scrubberNewYour release history on a ruler you scrub: drag the playhead, or press play and watch the product ship.
• 30Cookie bannerAsks once, plainly, then folds into a small cookie button in the corner that grows back into the preferences.
• 31Newsletter footerA footer that’s still alive: a signup that becomes its own confirmation, drawn link underlines and your name in outline.
• 32Prompt composerThe input that starts it all: grows as you type, takes files, and turns Send into Stop while answering.
• 33Agent composerThe taller composer for agent surfaces: branch, folder and context on a tab above, permissions and model as pills that grow into their lists.
• 34Mentions and commandsType @ to pull in context or / for a command. The menu grows from the caret and your text becomes a chip.
• 35Attachment chipA file on its way into a prompt: uploading, being read, ready or failed.
• 36Mode switcherFast, Thinking, Research: a segmented switch with a sliding pill and locked paid modes.
• 37Model pickerThe model pill in your composer grows into the menu: what each model is for, speed, smarts and thinking effort.
• 38Voice inputDictate a prompt: a waveform from your real mic level, a timer, then transcribing.
• 39Voice noteA voice message you can scrub and read along with: the waveform fills, the time rolls, and the transcript highlights each word as it’s said.
• 40Thinking indicatorFour quiet loaders for the gap before the first token, with a label, a rolling timer and a finish that draws itself.
• 41Thinking traceAn expandable record of what an agent did: steps, reasoning, search or tool calls.
• 42Tool callOne tool invocation from arguments to result: preparing, running, done, failed or denied.
• 43Clarifying questionThe agent pauses to ask. Pick with a click or a number key, or type your own; it folds into a one-line receipt.
• 44Approval cardThe agent asks before it acts: what it wants to do, the details, Approve or Deny.
• 45PlanAn agent’s checklist that ticks itself off: pending, in progress, done, skipped or failed.
• 46Web researchWatch the agent search: the query types in, page icons stack up as it reads, then it folds into a trail of searches and the pages each one found.
• 47Command outputA command the agent runs: the log streams in, folds away on success, and stays open on failure.
• 48Task progressFor work that takes minutes: phases, a live timer, stats, cancel, and the result when it’s done.
• 49Task logWhat the agent did, task by task, as it does it: steps arrive on a hairline trail, files sit in chips, titles turn past tense.
• 50Streaming answerAn answer as it arrives, with inline citations, actions, sources and follow-ups.
• 51Code blockCode in an answer: highlighted as it streams, copy and wrap, long files folded, and an optional Apply.
• 52CitationAn inline numbered source that previews the site, title and snippet on hover or focus.
• 53Response versionsStep between regenerated answers with "2 / 3", and regenerate without losing the old ones.
• 54Selection actionsSelect text and a pill appears under it. Pick an action or describe an edit, and the rewrite streams in place.
• 55Inline rewriteDrag a dial and the paragraph rewrites itself in place: shared words glide, the rest blur out and rise in.
• 56Diff reviewAccept or reject what the AI changed, word by word for prose or line by line for code.
• 57Action receiptsWhat the agent actually did, one quiet line each, with Undo while a ring drains. Several stack into one.
• 58Error and limit statesCalm, specific notices for failed answers, being offline, rate limits and chats that grow too long.
• 59Usage meterCredits, messages or context left: quiet when there’s plenty, clear before it runs out.
• 60Usage limitsWhat an agent has left: the context window split by what fills it, and each plan limit with its share and a live reset countdown.
• 61Jump to latestA chat that follows the answer as it streams, lets go the moment you scroll up, and brings you back.
• 62Edit and resendFix a sent message where it sits. The bubble grows into an editor, then folds back and branches the reply.
• 63Chat historyPast chats grouped by day, searchable, with titles that write themselves, rename in place and delete with Undo.
• 64Earnings chartA bar chart that changes instead of redrawing: bars glide between periods, the scale and the total roll, a readout follows the pointer.
• 65Steps chartA week against a daily goal: days that make it fill in, a wave runs the way you step through the weeks, the totals roll.
• 66Revenue chartThis year as an area, last year behind it; point at a month and the header becomes the readout, switch the measure and the lines reshape.
• 67Area chartSeveral series stacked, overlapping or as shares: every band morphs between layouts, and the tiles are the legend, the switches and the readout.
• 68Combo chartEvery day as a bar and the trend as a line on one scale: point at a day and the header becomes its readout while the line’s dot pings where it lands.
• 69Stage barsA funnel you can read at a glance: every stage as a bar against the first, the drop-off between them, and widths that ease when the period changes.
• 70Activity ringsThree daily goals as concentric rings beside a tight legend, with the week underneath: pick a day and the rings sweep to it.
• 71Agent playbackYour AI product working, hands-off and on a loop: the hero demo built from the real components.