Curtain Preloader
Show loading progress behind an opening curtain. Visitors can skip the intro, and you can choose a wipe, arch, or fade.
- Dependencies
- No extra packages
- Size
- 260 lines
- Controls
- 10 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/curtain-preloader.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/curtain-preloader.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the curtain-preloader.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brand / label | string | "ONYCX" / "Independent design studio" | Top-left line, rendered as BRAND® — LABEL in uppercase. |
| tagline / taglineAccent | string | — | Two-line statement beside the mark; the second line is italic grey. |
| caption / skipLabel | string | "Setting the scene" / "Skip intro" | Bottom-left caption and the skip button text. |
| minDuration / maxDuration | number | 180 / 4500 | Never flashes, never blocks longer than the cap. |
| exit | "wipe" | "arch" | "fade" | "wipe" | Clip-path wipe (studio), lifted arch (atelier) or fade. |
| accent / background / ink | string | "#ff4d27" / "#eeede7" / "#171717" | Mark and progress fill, curtain surface, text. |
| oncePerSession / sessionKey | boolean / string | false / "onycx-curtain" | Let returning visitors skip straight in (the original shows it on every load). |
| inertSelector | string | "main" | Regions made inert while the curtain is up. |
| onComplete | () => void | — | Fires when the curtain starts to leave, like the original's ready event, so hero entrances run underneath it. |