MotionNumber · MotionText

Een getal waarvan de cijfers rollen als wieltjes, ook cijfers die verschijnen of verdwijnen.

WebReact NativeGetallen en tekst

Probeer het

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

App.jsx

import { useState } from 'react';
import { MotionNumber, MotionText, motionTokens } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const formats = {
  plain: {},
  currency: { intl: true, locale: 'en-US', format: { style: 'currency', currency: 'USD' } },
  // Basis points: every preset and every ±1 step shows a different percentage.
  percent: { format: (value) => `${(value / 100).toFixed(2)}%` },
};

const presets = [9, 10, 999, 1000, 12480, 98765];

export default function App({
  mode = 'roll',
  direction = 'auto',
  format = 'currency',
  stagger = 40,
  spring = 'default',
}) {
  const [value, setValue] = useState(1000);
  const [trend, setTrend] = useState('Ready');

  const change = (next) => {
    setTrend(next > value ? 'Rising' : next < value ? 'Falling' : 'Same value');
    setValue(next);
  };

  return (
    <div className="lab">
      <MotionNumber
        className="value"
        value={value}
        mode={mode}
        direction={direction}
        stagger={stagger}
        transition={motionTokens.spring[spring]}
        {...formats[format]}
      />
      <MotionText className="trend">{trend}</MotionText>
      <div className="presets">
        {presets.map((preset) => (
          <button key={preset} onClick={() => change(preset)}>
            {preset}
          </button>
        ))}
      </div>
      <div className="steps">
        <button onClick={() => change(value - 1)}>−1</button>
        <button onClick={() => change(value + 1)}>+1</button>
        <button onClick={() => change(value * 10)}>×10</button>
        <button onClick={() => change(Math.round(value / 10))}>÷10</button>
      </div>
    </div>
  );
}

styles.css

.lab {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 32px 20px 28px;
}

.value {
  font:
    800 clamp(44px, 11vw, 80px)/1.05 system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: #0e2e24;
}

.trend {
  padding: 4px 12px;
  border-radius: 999px;
  background: #eaf6f0;
  color: #176b52;
  font-weight: 650;
  font-size: 14px;
}

.presets,
.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.presets button,
.steps button {
  min-width: 56px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 15px system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: #0e2e24;
  cursor: pointer;
}

.steps button {
  background: #f4faf7;
}

.presets button:hover,
.steps button:hover {
  border-color: #176b52;
}

Kortste gebruik

Total.jsx

<MotionNumber value={count} />
<MotionNumber value={total} mode="roll" intl locale="en-US"
  format={{ style: 'currency', currency: 'USD' }} />
<MotionText>{status}</MotionText>

Wat het voor je regelt

Overdrachten: 999 → 1,000 rolt elk gewijzigd cijfer dezelfde kant op, zoals een kilometerteller.
Cijfers die verschijnen of verdwijnen, rollen in of uit hun eigen kolom in plaats van op te poppen.
Scheidingstekens, tekens en valutasymbolen faden in en uit met het cijfer waar ze bij horen.
Overige cijfers schuiven naar hun nieuwe plek terwijl ze rollen, dus het getal valt nooit uiteen.
Een nieuwe waarde midden in een beweging gaat precies verder vanaf wat op het scherm staat.
Opmaak vereist nooit Intl: geef tekst of een format-functie mee, of zet intl aan.

Gebruik het voor

Een winkelwagentotaal dat verandert als artikelen worden toegevoegd.
Een live teller of score.
Een dashboardcijfer dat elke paar seconden ververst.

Props

`MotionNumber`

Prop	Type	Standaard	Beschrijving
`value`	`number \| bigint \| string`	`—`verplicht	Het getal, of door jou opgemaakte numerieke tekst.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` verplaatst elk gewijzigd cijfer één stap; `roll` gaat langs de tussenliggende cijfers.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` volgt de grootteverandering zodat overdrachten één kant op rollen; `digit` vergelijkt elk cijfer apart.
`stagger`	`number`	`45`	Milliseconden tussen gewijzigde cijfers, vanaf de eenheden naar buiten. De hele golf is begrensd.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Een functie die de te tonen tekst teruggeeft, of `Intl.NumberFormat`-opties (met `intl`).
`intl`	`boolean`	`false`	Gebruik de ingebouwde `Intl.NumberFormat`. Standaard uit, zodat geen enkele runtime `Intl` nodig heeft.
`locale`	`string \| string[]`		Locale voor `intl`.
`prefix`	`string`		Tekst voor het getal.
`suffix`	`string`		Tekst na het getal.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.
`onMotionComplete`	`(value) => void`		Draait met de waarde zodra de cijfers tot rust zijn gekomen.

`MotionText`

Prop	Type	Standaard	Beschrijving
`children`	`ReactNode`		De te tonen tekst.
`as`	`element`	`'span'`	Het element dat wordt gerenderd.
`transition`	`Transition`	`spring`	Een timingcurve `{ duration, easing }` of een veer `{ tempo: 'spring', spring }`. Veren behouden hun momentum als ze worden onderbroken.
`onMotionComplete`	`(text) => void`		Draait als de beweging tot rust komt.

Andere props gaan naar het gerenderde element, dus className, style en event handlers werken zoals gewoonlijk.

Web en React Native

Op het web is elk cijfer een kleine stapel glyphs die door de Web Animations API wordt afgespeeld, en de tekst blijft selecteerbaar. MotionText animeert elke tekst: numerieke tekst rolt per cijfer, andere tekst wisselt.

In React Native blijft het getal een echte Text voor layout, selectie en toegankelijkheid, inclusief doorlopen en numberOfLines; de glyphs bewegen op de native driver.