Preloader
A full-screen intro whose words swap in turn before the panel lifts off with a curved edge.
Behaviour
- Reduced motion: one word, then the panel fades out.
- The words swap in turn, then the panel lifts with a curved bottom edge (a transform, not an animated border radius).
- 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.
Props
| Prop | Type | Description |
|---|---|---|
| words | string[]default Welcome in 10 languages | Shown one after another. |
| duration | numberdefault 2.4 | Seconds the words take in total, before the panel lifts. |
| storageKey | string | falsedefault "preloader-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/preloader.jsonHow to use
import { Preloader } from "@/components/ui/preloader";
// in your root layout, once
<Preloader />
<Preloader words={["Hello", "Hola", "Bonjour"]} duration={1.8} onDone={() => console.log("in")} />Source code
Loading…
License
MIT. Copy it into your project and change it as you like.