Ticker
A large counter with the feel of a mechanical odometer at speed.
$149 once · every Pro piece
Customize
Every digit is a reel on its own spring; higher places start 15ms later, so a big change ripples from right to left. While a reel spins fast its digits stretch, fade and run accent, then sharpen and cool to bone as it settles. Digits that appear slide in from the left and the width springs, never snaps.
Install
npx shadcn@latest add @obsyde/tickerNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { Ticker } from '@/components/obsyde/ember/ticker/Ticker';
export function Example() {
return (
<Ticker value={12480} />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/ticker/Ticker.tsxcomponentember/ticker/ticker-demo.cssstylesember/ticker/ticker.cssstylesember/ticker/TickerDemo.tsxdemoember/effects-kit/kit.tssharedember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
valueValue | number | 12480 |
decimalsDecimals | number | 0 |
separatorThousands separator | boolean | true |
sizeSize (px) | number | 72 |
prefixPrefix | string | — |
suffixSuffix | string | — |