MotionNumber · MotionText

Angka yang digitnya bergulir seperti roda, termasuk digit yang muncul atau hilang.

WebReact NativeAngka dan teks

Coba

Menyiapkan contoh…

JavaScript nonaktif. Kode di bawah adalah contoh lengkapnya.

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

Penggunaan terpendek

Total.jsx

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

Yang ditanganinya untuk Anda

Simpanan: 999 → 1,000 menggulirkan setiap digit yang berubah ke arah yang sama, seperti odometer.
Digit yang muncul atau hilang bergulir masuk atau keluar dari kolomnya sendiri, bukan muncul tiba-tiba.
Pemisah, tanda, dan simbol mata uang muncul dan memudar bersama digit tempatnya berada.
Digit yang tersisa bergeser ke posisi barunya sambil bergulir, jadi angka tak pernah terpecah.
Nilai baru di tengah gerak melanjutkan tepat dari yang ada di layar.
Pemformatan tidak pernah memerlukan Intl: berikan teks atau fungsi format, atau aktifkan dengan intl.

Gunakan untuk

Total keranjang yang berubah saat item ditambahkan.
Penghitung atau skor langsung.
Angka dasbor yang diperbarui setiap beberapa detik.

Props

`MotionNumber`

Prop	Tipe	Bawaan	Deskripsi
`value`	`number \| bigint \| string`	`—`wajib	Angka, atau teks angka yang diformat pemanggil.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` menggerakkan setiap digit yang berubah satu langkah; `roll` melewati digit di antaranya.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` mengikuti perubahan besaran sehingga simpanan bergulir ke satu arah; `digit` membandingkan setiap digit sendiri-sendiri.
`stagger`	`number`	`45`	Milidetik antar digit yang berubah, dari satuan ke luar. Seluruh riaknya dibatasi.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Fungsi yang mengembalikan teks untuk ditampilkan, atau opsi `Intl.NumberFormat` (dengan `intl`).
`intl`	`boolean`	`false`	Gunakan `Intl.NumberFormat` bawaan. Mati secara bawaan agar tidak ada runtime yang memerlukan `Intl`.
`locale`	`string \| string[]`		Locale untuk `intl`.
`prefix`	`string`		Teks sebelum angka.
`suffix`	`string`		Teks setelah angka.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.
`onMotionComplete`	`(value) => void`		Berjalan dengan nilainya setelah digit berhenti.

`MotionText`

Prop	Tipe	Bawaan	Deskripsi
`children`	`ReactNode`		Teks yang ditampilkan.
`as`	`element`	`'span'`	Elemen yang dirender.
`transition`	`Transition`	`spring`	Kurva timing `{ duration, easing }` atau pegas `{ tempo: 'spring', spring }`. Pegas mempertahankan momentumnya saat diinterupsi.
`onMotionComplete`	`(text) => void`		Berjalan saat gerak berhenti.

Semua props lain diteruskan ke elemen yang dirender, jadi className, style, dan event handler bekerja seperti biasa.

Web dan React Native

Di web, setiap digit adalah tumpukan kecil glyph yang diputar Web Animations API, dan teksnya tetap bisa dipilih. MotionText menganimasikan teks apa pun: teks angka bergulir per digit, teks lain bertukar.

Di React Native, angka tetap Text sungguhan untuk tata letak, pemilihan, dan aksesibilitas, termasuk pembungkusan baris dan numberOfLines; glyph bergerak dengan driver native.