MotionNumber · MotionText

Un nombre dont les chiffres tournent comme des roues, y compris ceux qui apparaissent ou disparaissent.

WebReact NativeNombres et texte

Essayer

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple 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;
}

Usage minimal

Total.jsx

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

Ce qu’il gère pour vous

Retenues : 999 → 1,000 fait tourner chaque chiffre modifié dans le même sens, comme un compteur kilométrique.
Les chiffres qui apparaissent ou disparaissent entrent et sortent en roulant dans leur propre colonne au lieu de surgir.
Séparateurs, signes et symboles monétaires apparaissent et disparaissent en fondu avec le chiffre auquel ils appartiennent.
Les chiffres restants glissent vers leur nouvelle position pendant qu’ils défilent : le nombre ne se coupe jamais.
Une nouvelle valeur en plein mouvement repart exactement de ce qui est à l’écran.
Le formatage n’exige jamais Intl : passez du texte ou une fonction format, ou activez-le avec intl.

À utiliser pour

Le total d’un panier qui change à chaque ajout.
Un compteur ou un score en direct.
Un chiffre de tableau de bord rafraîchi toutes les quelques secondes.

Props

`MotionNumber`

Prop	Type	Défaut	Description
`value`	`number \| bigint \| string`	`—`obligatoire	Le nombre, ou un texte numérique déjà formaté par l’appelant.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` avance chaque chiffre modifié d’un cran ; `roll` passe par les chiffres intermédiaires.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` suit la variation d’ordre de grandeur pour que les retenues tournent dans un sens ; `digit` compare chaque chiffre isolément.
`stagger`	`number`	`45`	Millisecondes entre les chiffres modifiés, des unités vers l’extérieur. L’ondulation totale est bornée.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Une fonction qui renvoie le texte à afficher, ou des options `Intl.NumberFormat` (avec `intl`).
`intl`	`boolean`	`false`	Utilise l’`Intl.NumberFormat` intégré. Désactivé par défaut pour qu’aucun environnement n’ait besoin d’`Intl`.
`locale`	`string \| string[]`		Paramètre régional pour `intl`.
`prefix`	`string`		Texte avant le nombre.
`suffix`	`string`		Texte après le nombre.
`transition`	`Transition`	`spring`	Une courbe de temps `{ duration, easing }` ou un ressort `{ tempo: 'spring', spring }`. Les ressorts gardent leur élan quand ils sont interrompus.
`onMotionComplete`	`(value) => void`		S’exécute avec la valeur une fois les chiffres posés.

`MotionText`

Prop	Type	Défaut	Description
`children`	`ReactNode`		Le texte à afficher.
`as`	`element`	`'span'`	L’élément à rendre.
`transition`	`Transition`	`spring`	Une courbe de temps `{ duration, easing }` ou un ressort `{ tempo: 'spring', spring }`. Les ressorts gardent leur élan quand ils sont interrompus.
`onMotionComplete`	`(text) => void`		S’exécute quand le mouvement se pose.

Les autres props vont à l’élément rendu : className, style et les gestionnaires d’événements fonctionnent comme d’habitude.

Web et React Native

Sur le web, chaque chiffre est une petite pile de glyphes jouée par la Web Animations API, et le texte reste sélectionnable. MotionText anime n’importe quel texte : le texte numérique défile chiffre par chiffre, le reste s’échange.

Sur React Native, le nombre reste un vrai Text pour la mise en page, la sélection et l’accessibilité, y compris le retour à la ligne et numberOfLines ; les glyphes bougent avec le driver natif.