MotionNumber · MotionText

Broj čija se mjesta vrte poput kotačića, uključujući mjesta koja se pojavljuju ili nestaju.

WebReact NativeBrojevi i tekst

Isprobajte

Priprema primjera…

JavaScript je isključen. Kod ispod je cijeli primjer.

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

Najkraća upotreba

Total.jsx

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

Što obavlja umjesto vas

Prijenosi: 999 → 1,000 vrti svako promijenjeno mjesto u istom smjeru, poput brojača kilometara.
Mjesta koja se pojavljuju ili nestaju uvrću se ili izvrću u vlastitom stupcu umjesto da iskoče.
Razdjelnici, predznaci i simboli valuta pojavljuju se i nestaju s mjestom kojem pripadaju.
Preostala mjesta klize na nove položaje dok se vrte, pa se broj nikad ne raspada.
Nova vrijednost usred pokreta nastavlja točno od onoga što je na zaslonu.
Oblikovanje nikad ne zahtijeva Intl: predajte tekst ili funkciju format ili uključite intl.

Koristite je za

Zbroj košarice koji se mijenja dok se dodaju artikli.
Brojač ili rezultat uživo.
Podatak na nadzornoj ploči koji se osvježava svakih nekoliko sekundi.

Props

`MotionNumber`

Prop	Tip	Zadano	Opis
`value`	`number \| bigint \| string`	`—`obavezno	Broj ili brojčani tekst koji ste sami oblikovali.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` pomiče svako promijenjeno mjesto za jedan korak; `roll` prolazi kroz znamenke između.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` prati promjenu veličine, pa se prijenosi vrte u jednom smjeru; `digit` uspoređuje svako mjesto zasebno.
`stagger`	`number`	`45`	Milisekunde između promijenjenih mjesta, od jedinica prema van. Cijeli val je vremenski ograničen.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Funkcija koja vraća tekst za prikaz ili opcije `Intl.NumberFormat` (uz `intl`).
`intl`	`boolean`	`false`	Koristi ugrađeni `Intl.NumberFormat`. Prema zadanom isključeno, kako nijedno okruženje ne bi trebalo `Intl`.
`locale`	`string \| string[]`		Lokalizacija za `intl`.
`prefix`	`string`		Tekst prije broja.
`suffix`	`string`		Tekst nakon broja.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ili opruga `{ tempo: 'spring', spring }`. Opruge pri prekidu zadržavaju zamah.
`onMotionComplete`	`(value) => void`		Izvodi se s vrijednošću kad se mjesta smire.

`MotionText`

Prop	Tip	Zadano	Opis
`children`	`ReactNode`		Tekst za prikaz.
`as`	`element`	`'span'`	Element koji se renderira.
`transition`	`Transition`	`spring`	Krivulja timinga `{ duration, easing }` ili opruga `{ tempo: 'spring', spring }`. Opruge pri prekidu zadržavaju zamah.
`onMotionComplete`	`(text) => void`		Izvodi se kad se pokret smiri.

Ostali props idu renderiranom elementu, pa className, style i rukovatelji događaja rade kao i obično.

Web i React Native

Na webu je svako mjesto mali stupac glifova koji reproducira Web Animations API, a tekst ostaje označiv. MotionText animira bilo koji tekst: brojčani tekst vrti se po mjestima, ostali se zamjenjuje.

U React Nativeu broj ostaje pravi Text za raspored, označavanje i pristupačnost, uključujući prelamanje i numberOfLines; glifovi se kreću na nativnom driveru.