MotionNumber · MotionText

Et tal, hvis pladser ruller som hjul, også pladser, der dukker op eller forsvinder.

WebReact NativeTal og tekst

Prøv det

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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

Korteste brug

Total.jsx

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

Det klarer den for dig

Mente: 999 → 1,000 ruller hver ændret plads i samme retning, som en kilometertæller.
Pladser, der dukker op eller forsvinder, ruller ind i eller ud af deres egen kolonne i stedet for at poppe.
Separatorer, fortegn og valutasymboler toner ind og ud med den plads, de hører til.
De resterende pladser glider til deres nye positioner, mens de ruller, så tallet aldrig splitter.
En ny værdi midt i en bevægelse fortsætter præcis fra det, der er på skærmen.
Formatering kræver aldrig Intl: giv tekst eller en format-funktion, eller slå intl til.

Brug den til

En kurvtotal, der ændrer sig, når varer tilføjes.
En live-tæller eller -score.
Et tal på et dashboard, der opdateres med få sekunders mellemrum.

Props

`MotionNumber`

Prop	Type	Standard	Beskrivelse
`value`	`number \| bigint \| string`	`—`påkrævet	Tallet eller numerisk tekst, som du har formateret.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` flytter hver ændret plads ét trin; `roll` passerer cifrene imellem.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` følger størrelsesændringen, så mente ruller i én retning; `digit` sammenligner hver plads for sig.
`stagger`	`number`	`45`	Millisekunder mellem ændrede pladser, fra enerne og udad. Hele bølgen er begrænset.
`format`	`(value) => string \| Intl.NumberFormatOptions`		En funktion, der returnerer teksten, der skal vises, eller `Intl.NumberFormat`-indstillinger (med `intl`).
`intl`	`boolean`	`false`	Brug den indbyggede `Intl.NumberFormat`. Slået fra som standard, så intet runtime kræver `Intl`.
`locale`	`string \| string[]`		Locale til `intl`.
`prefix`	`string`		Tekst før tallet.
`suffix`	`string`		Tekst efter tallet.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.
`onMotionComplete`	`(value) => void`		Kører med værdien, når pladserne er landet.

`MotionText`

Prop	Type	Standard	Beskrivelse
`children`	`ReactNode`		Teksten, der skal vises.
`as`	`element`	`'span'`	Elementet, der renderes.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjeder `{ tempo: 'spring', spring }`. Fjedre bevarer deres momentum, når de afbrydes.
`onMotionComplete`	`(text) => void`		Kører, når bevægelsen lander.

Andre props går til det renderede element, så className, style og event handlers virker som normalt.

Web og React Native

På nettet er hver plads en lille stak glyffer, der afspilles af Web Animations API, og teksten kan stadig markeres. MotionText animerer enhver tekst: numerisk tekst ruller pr. plads, anden tekst skiftes.

I React Native forbliver tallet en rigtig Text til layout, markering og tilgængelighed, inklusive ombrydning og numberOfLines; glyfferne bevæger sig på native driver.