Krizaka
Documentation

Number ticker

A figure that climbs into view once, or rolls digit by digit to each new value — server-rendered at its final value, its width held from the first paint, read once by assistive technology.

WebBetaData display

Web only — React, from @krizaka/ui/number-ticker. Beta: its API may still change in a minor version.

When to use

  • The key figures of a page (90 %, 12,480 creators): they climb once as they come into view.
  • A live total that changes while it is watched — an auction's highest bid, a tip jar, a credit balance (trigger="change").

When not to use

  • For a figure with its trend and comparison in a dashboard tile.Use instead: Stat
  • For time left until a moment.Use instead: Countdown
  • Inside running text, or for every number of a table: motion there gets in the way of reading.

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { NumberTicker } from "@krizaka/ui/number-ticker";

Examples

Key figures

Three figures that climb once into view — a percentage, a count, a decimal — formatted by Intl.

of every support goes to the creator
90%
creators paid this month
12,480
seconds to the first token
1.2

A live total

trigger="change": the highest bid rolls digit by digit, a rise flashes, the amount is announced.

€1,250

In gradient text

The digits stay painted by the gradient while they climb.

4.9

Props

A figure that climbs into view, or rolls digit by digit to each new value.

PropTypeDefaultDescription
valuerequirednumber—The value to show.
align"start" | "end"endWhere the figure sits in the box its final width reserves.
announceboolean—Announce each new value politely (trigger="change"): a live total the reader should hear.
durationnumber1100Milliseconds of the climb.
formatNumberFormatOptions—How to write it ({ style: "currency", currency: "EUR" }, { maximumFractionDigits: 1 }…): Intl.NumberFormat options.
localestring—The locale of the digits and separators ("fr": 1 204,5) — the app's locale.
trigger"view" | "change"viewview: climbs from 0 once, the first time it scrolls into view. change: each digit rolls to the new value whenever value changes (a live total).

Accessibility

  • The moving digits are hidden from assistive technology; a visually hidden copy carries the final value — read once, never “0, 312, 1,204…”.
  • announce makes that copy a polite live region: each new value is heard.
  • Under prefers-reduced-motion nothing climbs or rolls: the value is simply there.
  • Server-rendered at the final value: no layout shift (an invisible copy holds the width), nothing missing without JavaScript.

Best practices

  • Format with the app's locale and Intl options (format): currency, unit, fraction digits — never by hand.
  • A few figures per page climb; the rest stay still.
  • For a live total, announce only when the change matters to the reader (an outbid), not for every tick.

Generated from the code of @krizaka/ui 2.3.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Meter

A measure within a known range — a quota, a balance, a share: thresholds turn it to warning then danger (or the reverse when high is good), and split into parts it becomes a stacked bar or ring with its legend.

Stat

A key figure: a label, a value in tabular digits, a hint and a trend said in words.

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components