Sticker Roll Preloader
A playful odometer preloader: oversized digits roll from 0 to 100 while visitors stamp a trail of die-cut stickers with their cursor, then the screen opens with a staggered curtain reveal.
Sticker Roll Preloader is a Pro component
Subscribe to unlock the live preview, canvas editing and the full source.
Features
- •Mechanical odometer counter — The units reel rolls continuously while tens and hundreds tick over, and extra digits slide in as the number grows (1 → 10 → 100).
- •Interactive sticker trail — Visitors stamp springy die-cut stickers as they move the cursor or tap. On phones the trail draws itself, so mobile visitors see it too.
- •8 exit reveals — 5- and 8-column curtains, horizontal and vertical splits, iris, zoom-dissolve, slide-up and fade.
- •Responsive to its container — Digits, stickers and spacing scale with the container's size, from a 320px phone to an ultrawide monitor, and on the canvas preview.
- •Accessible by default — Announced as a progress bar to screen readers, and with reduced motion turned on, stickers fade instead of spring and the exit becomes a gentle fade.
- •Production details handled — Locks page scroll while visible, pauses when offscreen, caps live stickers, cleans up every timer, and can show once per session.
Props API Reference
22 configurable props| Prop | Type | Default | Description |
|---|---|---|---|
| speed | "ultra-slow" | "very-slow" | "slow" | "medium" | "fast" | number | "very-slow" | Count duration preset (15s / 10s / 8s / 5.5s / 3.5s), or an exact number of seconds. |
| easing | "ease-out" | "linear" | "ease-in-out" | "ease-out" | How the count accelerates. Ease-out settles slowly onto 100. |
| holdDuration | number | 1.5 | Seconds the counter rests on 100 before the exit starts. |
| exitStyle | "curtain-5" | "curtain-8" | "split-horizontal" | "split-vertical" | "iris" | "zoom-dissolve" | "slide-up" | "fade-out" | "curtain-5" | The reveal animation that uncovers your site. |
| exitDuration | number | 0.65 | Seconds for the exit reveal. |
| backgroundColor | string | "#EAEDF0" | Preloader backdrop color. |
| counterColor | string | "#111116" | Color of the rolling digits. |
| counterFontSize | number | 240 | Maximum digit size in px. Digits shrink automatically on smaller screens. |
| counterFormat | "dynamic" | "padded" | "three-digit" | "dynamic" | Dynamic grows 1→2→3 digits; padded shows 00; three-digit shows 000. |
| counterSuffix | string | "" | Optional text after the number, e.g. "%". |
| fontFamily | string | inherit | Digit font. Inherits your site font by default. |
| fontWeight | number | 700 | Digit font weight. |
| stickers | string[] | [] | Your own sticker image URLs (SVG/PNG), used before the built-in set. |
| stickerSize | number | 120 | Maximum sticker size in px. Shrinks on smaller screens. |
| stickerLifetime | number | 1 | Seconds each sticker stays before peeling away. |
| autoTrail | "touch" | "always" | "off" | "touch" | Draw the sticker trail automatically on touch devices, always (when the cursor is idle), or never. |
| fullscreen | boolean | true | Cover the viewport, or fill the nearest positioned parent when false. |
| lockScroll | boolean | true | Prevent page scrolling while the preloader is visible (fullscreen only). |
| showOncePerSession | boolean | false | Skip the preloader on later page loads in the same browser session. |
| zIndex | number | 9999 | Stack order above your page. |
| onComplete | () => void | undefined | Called after the exit reveal finishes (or immediately when skipped). |
| className | string | undefined | Classes for the root element. |