Number Ticker

A count-up number that starts when it scrolls into view and eases to `value`. It does nothing by default: `startValue` defaults to `value`, so you get an honest static number — and an honest SSR render — until you pass a lower one to opt into the count.

decorativeclientuiv1.1.0

Number Ticker — live rendermagicui-numberticker--default ↗

Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.

Install

Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.

Via shadcn URL

npx shadcn@latest add https://ds.interlace.tools/r/number-ticker.json

With the @interlace alias

npx shadcn@latest add @interlace/number-ticker

Behavior

What this component does — the keyboard path, the measured colour, the text equivalent and the states it can be in. Every figure below is read out of the test or the source that enforces it by scripts/build-behavior-map.mjs, so nothing here can outlive the gate that keeps it true.

Measured contrast

packages/ui/__tests__/theme-contract-lock.test.ts ↗

Every semantic colour pair this component's own source uses, measured against the shipped hexes in all 4 theme × scheme combinations. The tightest is foreground on background at 16.19:1 (harbor · dark), against a floor of 4.5:1.

Measured WCAG contrast ratios per token pair and theme
Pair	interlacelight	interlacedark	harborlight	harbordark	Floor
foreground on backgroundbody copy	19.65:1	16.97:1	17.74:1	16.19:1	4.5:1SC 1.4.3

Text pairs are held to 4.5:1 (WCAG 2.2 SC 1.4.3); borders, rings and chart axes to 3:1 (SC 1.4.11 non-text). Bold is the worst cell in the row — the one a brand fork has to keep an eye on.

Runtime contract

packages/ui/vitest.config.ts ↗

Where it renders, how narrow it survives, and whether its lines are inside the coverage gate — three answers a consumer needs before the paste, not after the bug.

Render boundary: 'use client'
Hydrates. It brings JavaScript to any route that imports it — put the boundary here, not at the page.
Minimum viewport: none declared
No width floor: it takes the width it is given. Its container owns the layout question.
Coverage gate: not in the gate
The 100% gate currently covers src/charts/**/*.{ts,tsx} and src/lib/**/*.{ts,tsx} and src/primitives/{button-variants,data-state-model,meter-scale,skeleton-variants}.ts and src/primitives/{alert,aspect-ratio,avatar,badge,box,breadcrumb,button,callout,card,checkbox,container,data-state,focus-ring,grade-badge,grid,input,label,meter,pagination,published-date,reading-time,section,section-boundary,separator,skip-link,stack,stat-strip,tag,textarea,typography,visually-hidden}.tsx. This file is outside it — the glob widens in phase 7.2.

History

This component is at v1.1.0, first shipped in @interlace/ui 1.0.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.

@interlace/ui 1.1.01 entry

Changedpatch
Six defects found by upgrading a real consumer, plus five found by reading the components closely enough to document them. **Meteors' glow never painted.** It read var(--color-meteor-glow) while its cssVars declare --meteor-glow; --color-* is the Tailwind @theme namespace and only cssVars.theme populates it, so the whole box-shadow was invalid at computed-value time. **This was broken only for registry consumers** — our own docs site hand-declares the --color- form. **ArticleCard cropped 28% off every cover.** h-44 is 176px; at a ~302px tile that is a 1.72:1 box against a 2.381:1 image. Now aspect-[1000/420] — the ratio the card already declared on its <img>. It also gains a renderImage slot, because every Next.js consumer was re-patching the same line to use next/image and the design system cannot depend on it. **BorderBeam and StarsBackground had no aria-hidden at all** — six purely decorative nodes a screen reader walked. **CloudParticles defaulted bodyColor to currentColor**, painting volumetric clouds in the inherited text colour. **NumberTicker gains notation**, because six-figure metrics overflow a tile at 320px. Also: SheetCompose and DialogCompose each mounted a second backdrop, so a composed dialog dimmed the page twice as much as the hand-composed tree the docs show; Accordion dropped className on the animated Panel; Tooltip accepted delay and discarded it; PopoverAnchor was a second trigger. **useReducedMotion was one frame late.** The canonical useState(false) plus effect returns false on the first render, so every gated component painted one frame of exactly the motion the user turned off. useSyncExternalStore reads during render and closes that on client renders; on hydration the server cannot know the preference, which is what the stylesheet reset is for. Badge drops 'use client' — verified with a real server-component build.
Components

Import

Single named export.

Public API

import { NumberTicker } from '@/components/ui/magicui/number-ticker';

Anatomy

Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.

NumberTicker                     (span — tabular-nums, formatted via Intl)
There is one element. The count writes `ref.current.textContent` directly
on each frame rather than re-rendering, so React never sees the intermediate
values.

Accessibility

Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.

What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.

Focus + keyboard behaviour: Native element semantics — no interaction layer to get wrong.
Focus ring (WCAG 2.2 SC 2.4.13): Not focusable — no focus indicator required.
Reduced motion: Animation is gated on prefers-reduced-motion.
ARIA in the source: None — semantics come from the element or the Base UI primitive rather than hand-written ARIA.

Examples

5 more states from the same story file.

no animationmagicui-numberticker--no-animation ↗

count downmagicui-numberticker--count-down ↗

decimal placesmagicui-numberticker--decimal-places ↗

compactmagicui-numberticker--compact ↗

compact with decimalmagicui-numberticker--compact-with-decimal ↗

Dependencies

Base UI primitive: Native / no Base UI dependency
Lucide icons: none
NPM dependencies: none
Registry dependencies: @interlace/theme
@interlace/cn
@interlace/use-reduced-motion

Source

The full implementation — components/ui/magicui/number-ticker.tsx once installed.

207 lines · TypeScript

github ↗

"use client"

import { ComponentPropsWithoutRef, useCallback, useEffect, useRef, useState } from "react"



// @interlace/number-ticker v1.1.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/number-ticker
// What changed since: https://ds.interlace.tools/c/number-ticker#history
// Generated banner — keep it, the upgrade diff reads this version.

/**
 * @interlace/ui — NumberTicker
 *
 * A count-up number that starts when it scrolls into view and eases to
 * `value`. It does nothing by default: `startValue` defaults to `value`, so
 * you get an honest static number — and an honest SSR render — until you pass
 * a lower one to opt into the count.
 *
 * Our reimplementation of the Magic UI component of the same name, rebuilt on

…187 more lines…

Registry JSON

The raw registry record — what the shadcn CLI fetches.

/r/number-ticker.json