MotionNumber · MotionText

מספר שהספרות שלו מתגלגלות כמו גלגלים, כולל ספרות שמופיעות או נעלמות.

אינטרנטReact 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` המובנה. כבוי כברירת מחדל כך שאף סביבת ריצה לא צריכה `Intl`.
`locale`	`string \| string[]`		Locale עבור `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 ומטפלי אירועים עובדים כרגיל.

אינטרנט ו־React Native

באינטרנט כל ספרה היא ערימה קטנה של גליפים שמנוגנת ב־Web Animations API, והטקסט נשאר ניתן לסימון. MotionText מנפיש כל טקסט: טקסט מספרי מתגלגל ספרה אחר ספרה, טקסט אחר מתחלף.

ב־React Native המספר נשאר Text אמיתי לפריסה, לסימון ולנגישות, כולל שבירת שורות ו־numberOfLines; הגליפים זזים על ה־driver הנייטיב.