MotionNumber · MotionText

Ένας αριθμός του οποίου τα ψηφία κυλούν σαν τροχοί, μαζί με ψηφία που εμφανίζονται ή εξαφανίζονται.

WebReact NativeΑριθμοί και κείμενο

Δοκιμάστε το

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

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

Η πιο σύντομη χρήση

Total.jsx

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

Τι αναλαμβάνει για εσάς

Κρατούμενα: το 999 → 1,000 κυλά κάθε ψηφίο που αλλάζει προς την ίδια κατεύθυνση, σαν οδόμετρο.
Τα ψηφία που εμφανίζονται ή εξαφανίζονται κυλούν μέσα ή έξω από τη δική τους στήλη αντί να πετάγονται.
Τα διαχωριστικά, τα πρόσημα και τα σύμβολα νομίσματος εμφανίζονται και σβήνουν μαζί με το ψηφίο στο οποίο ανήκουν.
Τα υπόλοιπα ψηφία γλιστρούν στις νέες θέσεις τους ενώ κυλούν, οπότε ο αριθμός δεν διασπάται ποτέ.
Μια νέα τιμή στη μέση της κίνησης συνεχίζει ακριβώς από ό,τι φαίνεται στην οθόνη.
Η μορφοποίηση δεν απαιτεί ποτέ Intl: δώστε κείμενο ή συνάρτηση format, ή ενεργοποιήστε το με intl.

Χρησιμοποιήστε το για

Ένα σύνολο καλαθιού που αλλάζει καθώς προστίθενται προϊόντα.
Ένας ζωντανός μετρητής ή σκορ.
Ένα νούμερο πίνακα ελέγχου που ανανεώνεται κάθε λίγα δευτερόλεπτα.

Props

`MotionNumber`

Prop	Τύπος	Προεπιλογή	Περιγραφή
`value`	`number \| bigint \| string`	`—`υποχρεωτικό	Ο αριθμός ή αριθμητικό κείμενο μορφοποιημένο από τον καλούντα.
`mode`	`'replace' \| 'roll'`	`'replace'`	Το `replace` μετακινεί κάθε ψηφίο που αλλάζει ένα βήμα· το `roll` περνά από τα ενδιάμεσα ψηφία.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	Το `auto` ακολουθεί την αλλαγή μεγέθους ώστε τα κρατούμενα να κυλούν προς μία κατεύθυνση· το `digit` συγκρίνει κάθε ψηφίο χωριστά.
`stagger`	`number`	`45`	Χιλιοστά του δευτερολέπτου ανάμεσα στα ψηφία που αλλάζουν, από τις μονάδες προς τα έξω. Ολόκληρος ο κυματισμός είναι περιορισμένος.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Συνάρτηση που επιστρέφει το κείμενο προς εμφάνιση ή επιλογές `Intl.NumberFormat` (με `intl`).
`intl`	`boolean`	`false`	Χρήση του ενσωματωμένου `Intl.NumberFormat`. Απενεργοποιημένο από προεπιλογή ώστε κανένα runtime να μη χρειάζεται `Intl`.
`locale`	`string \| string[]`		Τοπικές ρυθμίσεις για το `intl`.
`prefix`	`string`		Κείμενο πριν από τον αριθμό.
`suffix`	`string`		Κείμενο μετά τον αριθμό.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.
`onMotionComplete`	`(value) => void`		Εκτελείται με την τιμή μόλις ηρεμήσουν τα ψηφία.

`MotionText`

Prop	Τύπος	Προεπιλογή	Περιγραφή
`children`	`ReactNode`		Το κείμενο προς εμφάνιση.
`as`	`element`	`'span'`	Το στοιχείο προς απόδοση.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.
`onMotionComplete`	`(text) => void`		Εκτελείται όταν ηρεμήσει η κίνηση.

Τα υπόλοιπα props πηγαίνουν στο στοιχείο που αποδίδεται, οπότε τα className, style και οι χειριστές συμβάντων λειτουργούν κανονικά.

Web και React Native

Στο web, κάθε ψηφίο είναι μια μικρή στοίβα γλυφών που παίζεται από το Web Animations API, και το κείμενο παραμένει επιλέξιμο. Το MotionText κινεί οποιοδήποτε κείμενο: το αριθμητικό κείμενο κυλά ανά ψηφίο, το υπόλοιπο εναλλάσσεται.

Στο React Native ο αριθμός μένει πραγματικό Text για διάταξη, επιλογή και προσβασιμότητα, μαζί με αναδίπλωση και numberOfLines· οι γλυφές κινούνται με τον native driver.