MotionNumber · MotionText

Basamakları tekerlek gibi dönen bir sayı; beliren ya da kaybolan basamaklar dahil.

WebReact NativeSayılar ve metin

Deneyin

Örnek hazırlanıyor…

JavaScript kapalı. Aşağıdaki kod örneğin tamamıdır.

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

En kısa kullanım

Total.jsx

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

Sizin yerinize hallettikleri

Eldeler: 999 → 1,000 değişen her basamağı bir kilometre sayacı gibi aynı yönde döndürür.
Beliren ya da kaybolan basamaklar aniden çıkmak yerine kendi sütunlarına dönerek girer ya da çıkar.
Ayırıcılar, işaretler ve para birimi simgeleri ait oldukları basamakla birlikte belirir ve solar.
Kalan basamaklar dönerken yeni konumlarına kayar; sayı asla bölünmez.
Hareketin ortasındaki yeni bir değer tam olarak ekranda olandan devam eder.
Biçimlendirme asla Intl gerektirmez: metin ya da bir format fonksiyonu verin ya da intl ile açın.

Şunlar için kullanın

Ürün eklendikçe değişen bir sepet toplamı.
Canlı bir sayaç ya da skor.
Birkaç saniyede bir yenilenen bir pano rakamı.

Props

`MotionNumber`

Prop	Tip	Varsayılan	Açıklama
`value`	`number \| bigint \| string`	`—`zorunlu	Sayı ya da çağıranın biçimlendirdiği sayısal metin.
`mode`	`'replace' \| 'roll'`	`'replace'`	`replace` değişen her basamağı bir adım taşır; `roll` aradaki rakamlardan geçer.
`direction`	`'auto' \| 'digit' \| 'up' \| 'down'`	`'auto'`	`auto` boyuttaki değişikliği izler, eldeler tek yönde döner; `digit` her basamağı kendi içinde karşılaştırır.
`stagger`	`number`	`45`	Değişen basamaklar arasındaki milisaniye, birler basamağından dışa doğru. Dalganın tamamı sınırlıdır.
`format`	`(value) => string \| Intl.NumberFormatOptions`		Gösterilecek metni döndüren bir fonksiyon ya da `Intl.NumberFormat` seçenekleri (`intl` ile).
`intl`	`boolean`	`false`	Yerleşik `Intl.NumberFormat`'ı kullanır. Hiçbir çalışma zamanının `Intl` gerektirmemesi için varsayılan olarak kapalıdır.
`locale`	`string \| string[]`		`intl` için yerel ayar.
`prefix`	`string`		Sayıdan önceki metin.
`suffix`	`string`		Sayıdan sonraki metin.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.
`onMotionComplete`	`(value) => void`		Basamaklar yerleşince değerle çalışır.

`MotionText`

Prop	Tip	Varsayılan	Açıklama
`children`	`ReactNode`		Gösterilecek metin.
`as`	`element`	`'span'`	Render edilecek öğe.
`transition`	`Transition`	`spring`	Bir timing eğrisi `{ duration, easing }` ya da bir yay `{ tempo: 'spring', spring }`. Yaylar kesildiğinde momentumlarını korur.
`onMotionComplete`	`(text) => void`		Hareket yerleşince çalışır.

Diğer props render edilen öğeye gider; böylece className, style ve olay işleyiciler her zamanki gibi çalışır.

Web ve React Native

Web'de her basamak, Web Animations API'nin oynattığı küçük bir glif yığınıdır ve metin seçilebilir kalır. MotionText her metni canlandırır: sayısal metin basamak basamak döner, diğer metin değiş tokuş edilir.

React Native'de sayı, düzen, seçim ve erişilebilirlik için gerçek bir Text olarak kalır; satır kaydırma ve numberOfLines dahil. Glifler native driver ile hareket eder.