MotionNumber · MotionText

Число, разряды которого крутятся как колёсики, включая появляющиеся и исчезающие разряды.

ВебReact NativeЧисла и текст

Попробуйте

Подготовка примера…

JavaScript отключён. Код ниже — полный пример.

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

Кратчайшее использование

Total.jsx

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

Что он берёт на себя

Переносы: 999 → 1,000 прокручивает каждый изменившийся разряд в одну сторону, как одометр.
Появляющиеся и исчезающие разряды въезжают и уезжают в своей колонке, а не возникают скачком.
Разделители, знаки и символы валют появляются и исчезают вместе со своим разрядом.
Оставшиеся разряды сдвигаются на новые места, пока прокручиваются, поэтому число никогда не разваливается.
Новое значение посреди движения продолжается ровно с того, что на экране.
Форматирование никогда не требует Intl: передайте текст или функцию format либо включите intl.

Для чего подходит

Сумма корзины, которая меняется по мере добавления товаров.
Живой счётчик или счёт.
Показатель на панели, который обновляется каждые несколько секунд.

Props

`MotionNumber`

Проп	Тип	По умолчанию	Описание
`value`	`number \| bigint \| string`	`—`обязательно	Число или числовой текст, отформатированный вами.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` сдвигает каждый изменившийся разряд на один шаг; `roll` проходит через промежуточные цифры.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` следует за изменением величины, чтобы переносы крутились в одну сторону; `digit` сравнивает каждый разряд отдельно.
`stagger`	`number`	`45`	Миллисекунды между изменившимися разрядами, от единиц наружу. Вся волна ограничена по времени.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Функция, возвращающая текст для показа, или опции `Intl.NumberFormat` (вместе с `intl`).
`intl`	`boolean`	`false`	Использовать встроенный `Intl.NumberFormat`. По умолчанию выключено, чтобы ни одной среде выполнения не требовался `Intl`.
`locale`	`string \| string[]`		Локаль для `intl`.
`prefix`	`string`		Текст перед числом.
`suffix`	`string`		Текст после числа.
`transition`	`Transition`	`spring`	Кривая timing `{ duration, easing }` или пружина `{ tempo: 'spring', spring }`. При прерывании пружины сохраняют инерцию.
`onMotionComplete`	`(value) => void`		Выполняется со значением, когда разряды остановились.

`MotionText`

Проп	Тип	По умолчанию	Описание
`children`	`ReactNode`		Текст для показа.
`as`	`element`	`'span'`	Элемент для рендера.
`transition`	`Transition`	`spring`	Кривая timing `{ duration, easing }` или пружина `{ tempo: 'spring', spring }`. При прерывании пружины сохраняют инерцию.
`onMotionComplete`	`(text) => void`		Выполняется, когда движение останавливается.

Остальные props передаются отрендеренному элементу, поэтому className, style и обработчики событий работают как обычно.

Веб и React Native

В вебе каждый разряд — небольшая стопка глифов, которую воспроизводит Web Animations API, а текст остаётся выделяемым. MotionText анимирует любой текст: числовой прокручивается по разрядам, остальной сменяется.

В React Native число остаётся настоящим Text для раскладки, выделения и доступности, включая переносы и numberOfLines; глифы движутся на нативном драйвере.