Counter loader
A full-screen intro whose counter rolls to 100 while stickers pile up, then a block wipes up and it lifts away.
Behaviour
- The counter rolls through the steps while the stickers pop into a fanned pile; they pop back out, a block wipes up, and the loader lifts away (transforms only).
- Click, tap or Escape skips it. It locks page scroll while it covers the page, padding for the scrollbar.
- On a repeat visit an inline script hides it before the first paint; with no JavaScript it uncovers the page by itself.
- Reduced motion: the number jumps from step to step, the stickers appear without the pop, and the loader fades out.
Props
| Prop | Type | Description |
|---|---|---|
| stickers | ReactNode[]default 4 token-coloured shapes | Popped one by one into a fanned pile while the counter runs; [] for none. |
| steps | number[]default [0, 27, 64, 100] | The numbers the counter rolls through. |
| duration | numberdefault 1.4 | Seconds the counter takes, before the block wipes up. |
| storageKey | string | falsedefault "counter-loader-seen" | sessionStorage key that makes it play once per tab; false plays it every load. |
| onDone | () => void | Called once the page is uncovered (right away when already seen). |
| contained | booleandefault false | Fill the nearest relative parent and leave page scroll alone: for a card or preview. |
Installation
npx shadcn@latest add https://purrfectui.com/r/counter-loader.jsonHow to use
import { CounterLoader } from "@/components/ui/counter-loader";
// in your root layout, once
<CounterLoader />
<CounterLoader stickers={[<img key="a" src="/a.webp" alt="" />, <img key="b" src="/b.webp" alt="" />]} steps={[0, 42, 100]} onDone={() => console.log("in")} />Source code
Loading…
Credits
Ported from poinu.vercel.app.
License
MIT. Copy it into your project and change it as you like.