Text & Typography Fancy Stable
NumberTicker
Animated number counter with easing, triggered on viewport entry
Preview
svelte
<script lang="ts">
import { NumberTicker } from 'fancy-ui-svelte';
</script>
<NumberTicker value={1234} />Installation
pnpm add fancy-ui-svelte
import { NumberTicker } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { NumberTicker } from 'fancy-ui-svelte';
</script>
<NumberTicker />Examples
Basic Usage
svelte
<script lang="ts">
import { NumberTicker } from "$lib/fancy-ui/number-ticker";
import ReplayButton from "$lib/components/ReplayButton.svelte";
let replayKey = $state(0);
</script>
<div class="relative">
<ReplayButton onclick={() => replayKey++} />
{#key replayKey}
<div class="flex items-center gap-16">
<div class="text-center">
<NumberTicker value={1234} class="text-6xl font-bold" />
<p class="text-muted-foreground mt-2 text-sm">Users</p>
</div>
<div class="text-center">
<NumberTicker value={567} class="text-6xl font-bold" />
<p class="text-muted-foreground mt-2 text-sm">Projects</p>
</div>
</div>
{/key}
</div>Decimal Places
Control decimal precision.
svelte
<script lang="ts">
import { NumberTicker } from "$lib/fancy-ui/number-ticker";
import ReplayButton from "$lib/components/ReplayButton.svelte";
let replayKey = $state(0);
</script>
<div class="relative text-center">
<ReplayButton onclick={() => replayKey++} />
{#key replayKey}
<span class="text-muted-foreground text-4xl font-bold">$</span>
<NumberTicker value={99.99} decimalPlaces={2} class="text-6xl font-bold" />
{/key}
</div>Count Down
Animate from high to low.
svelte
<script lang="ts">
import { NumberTicker } from "$lib/fancy-ui/number-ticker";
import ReplayButton from "$lib/components/ReplayButton.svelte";
let replayKey = $state(0);
</script>
<div class="relative">
<ReplayButton onclick={() => replayKey++} />
{#key replayKey}
<NumberTicker value={100} direction="down" class="text-6xl font-bold" />
{/key}
</div>With Delay
Add a start delay.
svelte
<script lang="ts">
import { NumberTicker } from "$lib/fancy-ui/number-ticker";
import ReplayButton from "$lib/components/ReplayButton.svelte";
let replayKey = $state(0);
</script>
<div class="relative">
<ReplayButton onclick={() => replayKey++} />
{#key replayKey}
<NumberTicker value={9999} delay={500} duration={2000} class="text-6xl font-bold" />
{/key}
</div>Interactive Playground
svelte
<script lang="ts">
import { NumberTicker } from "$lib/fancy-ui/number-ticker";
import PropsPlayground from "$lib/components/PropsPlayground.svelte";
</script>
<PropsPlayground
controls={[
{ key: "value", type: "range", label: "Value", min: 0, max: 100000, step: 100 },
{ key: "duration", type: "range", label: "Duration (ms)", min: 200, max: 5000, step: 100 },
{ key: "delay", type: "range", label: "Delay (ms)", min: 0, max: 2000, step: 100 },
{ key: "decimalPlaces", type: "range", label: "Decimal Places", min: 0, max: 4, step: 1 },
{
key: "direction",
type: "select",
label: "Direction",
options: [
{ value: "up", label: "Up" },
{ value: "down", label: "Down" },
],
},
]}
initialValues={{ value: 1234, duration: 1000, delay: 0, decimalPlaces: 0, direction: "up" }}
>
{#snippet preview(values)}
<div class="flex items-center justify-center rounded-xl p-12">
<NumberTicker
value={values.value as number}
duration={values.duration as number}
delay={values.delay as number}
decimalPlaces={values.decimalPlaces as number}
direction={values.direction as "up" | "down"}
class="text-6xl font-bold"
/>
</div>
{/snippet}
</PropsPlayground>Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Target number to animate to |
direction | "up" | "down" | "up" | Animation direction: "up" counts 0→value, "down" counts value→0 |
duration | number | 1000 | Animation duration in ms |
delay | number | 0 | Delay before animation starts in ms |
decimalPlaces | number | 0 | Number of decimal places to display |
Links
Related components
Bl
BlurReveal
Scroll-triggered reveal that unblurs and slides each direct child into place as the container enters the viewport, staggering up to 10 children via CSS nth-child delays and respecting reduced motion
Text & Typography Stable
Bo
BoxReveal
Reveal animation where a solid color box slides left to right across content on viewport entry, unveiling it as it fades up into place underneath, triggered once via IntersectionObserver
Text & Typography Stable
Co
ColourfulText
Per-character text animation where each glyph transitions to a new color from a shuffled palette, staggered across characters and reshuffling automatically every 5 seconds using pure CSS transitions
Text & Typography Stable