MotionNumber · MotionText

Ett tal vars positioner rullar som hjul, även positioner som dyker upp eller försvinner.

WebbReact NativeSiffror och text

Prova

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

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

Kortaste användning

Total.jsx

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

Det här sköter den åt dig

Minnessiffror: 999 → 1,000 rullar varje ändrad position åt samma håll, som en vägmätare.
Positioner som dyker upp eller försvinner rullar in i eller ut ur sin egen kolumn i stället för att poppa.
Avgränsare, tecken och valutasymboler tonar in och ut med positionen de hör till.
Kvarvarande positioner glider till sina nya platser medan de rullar, så talet delar sig aldrig.
Ett nytt värde mitt i en rörelse fortsätter exakt från det som syns på skärmen.
Formatering kräver aldrig Intl: skicka text eller en format-funktion, eller slå på intl.

Använd den för

En varukorgssumma som ändras när artiklar läggs till.
En liveräknare eller poängställning.
En siffra i en instrumentpanel som uppdateras med några sekunders mellanrum.

Props

`MotionNumber`

Prop	Typ	Standard	Beskrivning
`value`	`number \| bigint \| string`	`—`krävs	Talet, eller numerisk text som du formaterat.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` flyttar varje ändrad position ett steg; `roll` passerar siffrorna däremellan.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` följer storleksändringen så att minnessiffror rullar åt ett håll; `digit` jämför varje position för sig.
`stagger`	`number`	`45`	Millisekunder mellan ändrade positioner, från entalen och utåt. Hela vågen är begränsad.
`format`	`(value) => string \| Intl.NumberFormatOptions`		En funktion som returnerar texten som ska visas, eller `Intl.NumberFormat`-alternativ (med `intl`).
`intl`	`boolean`	`false`	Använd det inbyggda `Intl.NumberFormat`. Avstängt som standard så att ingen körmiljö behöver `Intl`.
`locale`	`string \| string[]`		Locale för `intl`.
`prefix`	`string`		Text före talet.
`suffix`	`string`		Text efter talet.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.
`onMotionComplete`	`(value) => void`		Körs med värdet när positionerna har landat.

`MotionText`

Prop	Typ	Standard	Beskrivning
`children`	`ReactNode`		Texten som ska visas.
`as`	`element`	`'span'`	Elementet som renderas.
`transition`	`Transition`	`spring`	En timingkurva `{ duration, easing }` eller en fjäder `{ tempo: 'spring', spring }`. Fjädrar behåller sitt momentum när de avbryts.
`onMotionComplete`	`(text) => void`		Körs när rörelsen landar.

Andra props går till det renderade elementet, så className, style och händelsehanterare fungerar som vanligt.

Webb och React Native

På webben är varje position en liten stapel glyfer som spelas upp av Web Animations API, och texten går att markera. MotionText animerar vilken text som helst: numerisk text rullar per position, annan text byts.

I React Native förblir talet en riktig Text för layout, markering och tillgänglighet, inklusive radbrytning och numberOfLines; glyferna rör sig på native driver.