Polished, dependency-free Svelte 5 components from Slift. First up: NumberRoll, an animated odometer-style number.
npm i @slift/uiRequires Svelte ≥ 5.16. No runtime dependencies, no custom elements, no shadow DOM, so it renders and hydrates cleanly on prerendered/SSR pages.
Each digit place is a vertical strip that rolls to its new value with a CSS transform transition. By default every digit rolls in the direction the whole number moved (wrapping 9↔0 like a real odometer), the top and bottom edges are softly masked so digits dissolve at the boundary, and prefers-reduced-motion is respected.
<script>
import { NumberRoll } from '@slift/ui'
let count = $state(0)
</script>
<button onclick={() => (count += 7)}>
<NumberRoll value={count} />
</button>It inherits font size, weight and color from its parent, so style the wrapper, not the component.
| Prop | Type | Default | Description |
|---|---|---|---|
value |
number |
required | The number to display. Changing it animates the roll. |
format |
Intl.NumberFormatOptions |
{ useGrouping: false } |
Passed to Intl.NumberFormat. Add fraction digits, grouping, currency, etc. |
locales |
Intl.LocalesArgument |
none | Locale(s) for formatting. |
duration |
number |
720 |
Roll duration in milliseconds. |
trend |
1 | 0 | -1 | 'auto' |
'auto' |
Roll direction. 'auto' follows the value's change; 1 always up; -1 always down; 0 lets each digit take its shortest path. |
class |
string |
none | Extra class on the root element. |
<!-- A formatted price -->
<NumberRoll value={total} format={{ style: 'currency', currency: 'USD' }} />
<!-- One decimal place, always counting up -->
<NumberRoll
value={rating}
format={{ minimumFractionDigits: 1, maximumFractionDigits: 1 }}
trend={1}
/>
<!-- A snappier roll -->
<NumberRoll value={n} duration={450} />Release notes are in CHANGELOG.md (also bundled with the package) and on the GitHub releases page.
NumberRoll's rolling-digit animation was inspired by NumberFlow by Maxwell Barvian. NumberRoll is an independent, dependency-free implementation built for Svelte 5.
MIT © Slift