MotionNumber · MotionText

Et tall der plassene ruller som hjul, også plasser som dukker opp eller forsvinner.

WebReact NativeTall og tekst

Prøv det

Forbereder eksempelet …

JavaScript er slått av. Koden nedenfor er hele eksempelet.

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 bruk

Total.jsx

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

Dette tar den seg av

Mente: 999 → 1,000 ruller hver endrede plass i samme retning, som en kilometerteller.
Plasser som dukker opp eller forsvinner, ruller inn i eller ut av sin egen kolonne i stedet for å sprette frem.
Skilletegn, fortegn og valutasymboler toner inn og ut sammen med plassen de hører til.
Gjenværende plasser glir til nye posisjoner mens de ruller, så tallet deler seg aldri.
En ny verdi midt i en bevegelse fortsetter nøyaktig fra det som er på skjermen.
Formatering krever aldri Intl: send tekst eller en format-funksjon, eller slå på intl.

Bruk den til

En handlekurvsum som endres når varer legges til.
En live teller eller poengsum.
Et tall på et dashbord som oppdateres med noen sekunders mellomrom.

Props

`MotionNumber`

Prop	Type	Standard	Beskrivelse
`value`	`number \| bigint \| string`	`—`påkrevd	Tallet, eller numerisk tekst du har formatert.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` flytter hver endrede plass ett steg; `roll` går gjennom sifrene imellom.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` følger størrelsesendringen så mente ruller én vei; `digit` sammenligner hver plass for seg.
`stagger`	`number`	`45`	Millisekunder mellom endrede plasser, fra enerne og utover. Hele bølgen er begrenset.
`format`	`(value) => string \| Intl.NumberFormatOptions`		En funksjon som returnerer teksten som skal vises, eller `Intl.NumberFormat`-alternativer (med `intl`).
`intl`	`boolean`	`false`	Bruk den innebygde `Intl.NumberFormat`. Av som standard, så ingen kjøremiljøer trenger `Intl`.
`locale`	`string \| string[]`		Locale for `intl`.
`prefix`	`string`		Tekst før tallet.
`suffix`	`string`		Tekst etter tallet.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.
`onMotionComplete`	`(value) => void`		Kjører med verdien når plassene har landet.

`MotionText`

Prop	Type	Standard	Beskrivelse
`children`	`ReactNode`		Teksten som skal vises.
`as`	`element`	`'span'`	Elementet som renderes.
`transition`	`Transition`	`spring`	En timingkurve `{ duration, easing }` eller en fjær `{ tempo: 'spring', spring }`. Fjærer beholder momentet når de avbrytes.
`onMotionComplete`	`(text) => void`		Kjører når bevegelsen lander.

Andre props går til det renderte elementet, så className, style og hendelseshåndterere fungerer som vanlig.

Web og React Native

På nettet er hver plass en liten stabel med glyfer som spilles av Web Animations API, og teksten kan fortsatt merkes. MotionText animerer hvilken som helst tekst: numerisk tekst ruller per plass, annen tekst byttes.

I React Native forblir tallet en ekte Text for layout, merking og tilgjengelighet, inkludert linjebryting og numberOfLines; glyfene beveger seg på native driver.