Number Ticker
Анимированный счётчик с форматированием Intl. Pro · Эффекты › Рамки, текст и числа
Установка
npx valyro-cli@latest login
npx valyro-cli@latest add number-tickernpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { NumberTicker } from 'valyro-ui-pro';Пропсы
| Prop | Type | Default | |
|---|---|---|---|
value * | number | The number to count to. Changing it animates from the number on screen. | |
from | number | 0 | Where the first count starts. |
variant | 'count' | 'roll' | 'count' | count — the number counts up to the value; roll — every digit rolls into place like an odometer. |
duration | number | 1600 | Animation length, ms. |
delay | number | 0 | Delay before the first count, ms. |
format | Intl.NumberFormatOptions | Intl.NumberFormat options: currency, percent, compact notation, units… | |
locale | string | BCP 47 locale. Default: the ThemeProvider's, then the browser's. | |
startOnView | boolean | true | Wait until the number scrolls into view before counting. |
Похожие компоненты
- Animated Border — Луч света, бегущий по рамке
- Shimmer Text — Блик, скользящий по тексту
- Text Reveal — Появление текста по словам и печатная машинка
- Marquee — Бесконечная бегущая строка логотипов и отзывов
- Glass Lens — Стеклянная линза с настоящим преломлением
- Morphing Capsule — Капсула, перетекающая между состояниями
- Floating Tab Bar — Плавающая стеклянная панель вкладок
- Aurora Background — Медленное северное сияние за контентом
- Gradient Background — Медленно перетекающий градиент
- Bubble Background — Мягкие цветные пузыри, один следует за курсором
- Stars Background — Звёздное небо с параллаксом за курсором
- Hexagon Background — Сетка шестиугольников со светящимся следом
Назад: Text Reveal · Далее: Marquee · Весь раздел «Эффекты»