MotionNumber · MotionText

Un număr ale cărui cifre se rotesc ca niște roți, inclusiv cifrele care apar sau dispar.

WebReact NativeNumere și text

Încercați

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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;
}

Cea mai scurtă utilizare

Total.jsx

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

Ce rezolvă în locul dumneavoastră

Transporturi: 999 → 1,000 rotește fiecare cifră schimbată în același sens, ca un odometru.
Cifrele care apar sau dispar intră sau ies rotindu-se din propria coloană, în loc să apară brusc.
Separatoarele, semnele și simbolurile monetare apar și se estompează odată cu cifra căreia îi aparțin.
Cifrele rămase alunecă spre noile poziții în timp ce se rotesc, așa că numărul nu se desparte niciodată.
O valoare nouă în mijlocul unei mișcări continuă exact de la ce e pe ecran.
Formatarea nu cere niciodată Intl: transmiteți text sau o funcție format, ori activați-o cu intl.

Folosiți-o pentru

Totalul unui coș care se schimbă pe măsură ce se adaugă produse.
Un contor sau un scor live.
O cifră de tablou de bord care se reîmprospătează la câteva secunde.

Props

`MotionNumber`

Prop	Tip	Implicit	Descriere
`value`	`number \| bigint \| string`	`—`obligatoriu	Numărul sau un text numeric formatat de apelant.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` mută fiecare cifră schimbată cu un pas; `roll` trece prin cifrele intermediare.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` urmează schimbarea de mărime, ca transporturile să se rotească într-un singur sens; `digit` compară fiecare cifră separat.
`stagger`	`number`	`45`	Milisecunde între cifrele schimbate, de la unități spre exterior. Întreaga undă este limitată.
`format`	`(value) => string \| Intl.NumberFormatOptions`		O funcție care returnează textul de afișat sau opțiuni `Intl.NumberFormat` (cu `intl`).
`intl`	`boolean`	`false`	Folosește `Intl.NumberFormat` integrat. Dezactivat implicit, ca niciun mediu de rulare să nu aibă nevoie de `Intl`.
`locale`	`string \| string[]`		Localizarea pentru `intl`.
`prefix`	`string`		Text înaintea numărului.
`suffix`	`string`		Text după număr.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.
`onMotionComplete`	`(value) => void`		Rulează cu valoarea după ce cifrele s-au așezat.

`MotionText`

Prop	Tip	Implicit	Descriere
`children`	`ReactNode`		Textul de afișat.
`as`	`element`	`'span'`	Elementul de randat.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.
`onMotionComplete`	`(text) => void`		Rulează când mișcarea se așază.

Celelalte props merg la elementul randat, așa că className, style și handlerele de evenimente funcționează ca de obicei.

Web și React Native

Pe web, fiecare cifră este un mic teanc de glife redat de Web Animations API, iar textul rămâne selectabil. MotionText animă orice text: textul numeric se rotește pe cifre, celălalt text se schimbă.

În React Native, numărul rămâne un Text real pentru layout, selecție și accesibilitate, inclusiv încadrarea pe rânduri și numberOfLines; glifele se mișcă pe driverul nativ.