MotionNumber · MotionText

Liczba, której cyfry obracają się jak kółka, łącznie z cyframi, które się pojawiają lub znikają.

SiećReact NativeLiczby i tekst

Wypróbuj

Przygotowywanie przykładu…

JavaScript jest wyłączony. Kod poniżej to pełny przykład.

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

Najkrótsze użycie

Total.jsx

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

Co robi za ciebie

Przeniesienia: 999 → 1,000 przewija każdą zmienioną cyfrę w tę samą stronę, jak licznik kilometrów.
Cyfry, które się pojawiają lub znikają, wjeżdżają lub wyjeżdżają we własnej kolumnie zamiast wyskakiwać.
Separatory, znaki i symbole walut pojawiają się i znikają razem z cyfrą, do której należą.
Pozostałe cyfry przesuwają się na nowe pozycje w trakcie przewijania, więc liczba nigdy się nie rozpada.
Nowa wartość w środku ruchu kontynuuje dokładnie od tego, co na ekranie.
Formatowanie nigdy nie wymaga Intl: przekaż tekst lub funkcję format albo włącz intl.

Do czego służy

Suma koszyka zmieniająca się przy dodawaniu produktów.
Licznik lub wynik na żywo.
Wskaźnik na panelu odświeżany co kilka sekund.

Props

`MotionNumber`

Prop	Typ	Domyślnie	Opis
`value`	`number \| bigint \| string`	`—`wymagane	Liczba lub sformatowany przez ciebie tekst liczbowy.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` przesuwa każdą zmienioną cyfrę o jeden krok; `roll` przechodzi przez cyfry pośrednie.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` podąża za zmianą wielkości, więc przeniesienia przewijają się w jedną stronę; `digit` porównuje każdą cyfrę osobno.
`stagger`	`number`	`45`	Milisekundy między zmienionymi cyframi, od jedności na zewnątrz. Cała fala jest ograniczona w czasie.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Funkcja zwracająca tekst do pokazania lub opcje `Intl.NumberFormat` (z `intl`).
`intl`	`boolean`	`false`	Użyj wbudowanego `Intl.NumberFormat`. Domyślnie wyłączone, więc żadne środowisko nie potrzebuje `Intl`.
`locale`	`string \| string[]`		Locale dla `intl`.
`prefix`	`string`		Tekst przed liczbą.
`suffix`	`string`		Tekst po liczbie.
`transition`	`Transition`	`spring`	Krzywa timing `{ duration, easing }` lub sprężyna `{ tempo: 'spring', spring }`. Sprężyny zachowują pęd po przerwaniu.
`onMotionComplete`	`(value) => void`		Uruchamia się z wartością, gdy cyfry się ułożą.

`MotionText`

Prop	Typ	Domyślnie	Opis
`children`	`ReactNode`		Tekst do pokazania.
`as`	`element`	`'span'`	Element do wyrenderowania.
`transition`	`Transition`	`spring`	Krzywa timing `{ duration, easing }` lub sprężyna `{ tempo: 'spring', spring }`. Sprężyny zachowują pęd po przerwaniu.
`onMotionComplete`	`(text) => void`		Uruchamia się, gdy ruch się ułoży.

Pozostałe props trafiają do renderowanego elementu, więc className, style i obsługa zdarzeń działają jak zwykle.

Sieć i React Native

W sieci każda cyfra to mały stos glifów odtwarzany przez Web Animations API, a tekst pozostaje do zaznaczenia. MotionText animuje dowolny tekst: tekst liczbowy przewija się cyfra po cyfrze, inny się zamienia.

W React Native liczba pozostaje prawdziwym Text dla układu, zaznaczania i dostępności, łącznie z zawijaniem i numberOfLines; glify poruszają się na sterowniku natywnym.