Shutter Preloader

Open a two-panel intro after the fonts and first-screen images are ready.

Dependencies: gsap
Size: 375 lines
Controls: 10 controls

example.tsx

1import { ShutterPreloader } from "@/components/onycx/shutter-preloader";23export default function Example() {4  return (5    <ShutterPreloader6      word={"ATLAS"}7      brand={"ONYCX"}8      kicker={"EVERY ROUTE. ONE CLEAR DIRECTION."}9      signature={"Movement,"}10      signatureAccent={"Without Limits."}11      minDuration={850}12      maxDuration={4200}13      accent={"#ff5825"}14      background={"#141414"}15      highlight={"#bfd8e3"}16    />17  );18}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/shutter-preloader.json

1 · Dependencies

npm install gsap

2 · Copy the source

components/onycx/shutter-preloader.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the shutter-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
word	string	"ATLAS"	Display word; each letter rises out of its own mask. Words longer than five letters scale down to fit.
brand / showMark / caption	string / boolean / string	—	Top row: chevron mark and wordmark, and a caps caption hidden under 700px.
kicker / signature / signatureAccent	string	—	Line above the word and the line under it; the accent takes the highlight colour.
startDelay / minDuration / maxDuration	number	350 / 850 / 4200	Hydration wait, never-flash minimum and hard cap (ms). A CSS failsafe hides the panel after 7s regardless.
accent / background / tint / highlight	string	"#ff5825" / "#141414" / "#004a6b66" / "#bfd8e3"	Progress and mark, shutter, seam glow, kicker and ticks.
oncePerSession / sessionKey	boolean / string	false / "onycx-shutter"	Optionally skip straight in for returning visitors in the same session.
inertSelector	string	"main"	Regions made inert while the shutter is closed (the source used .skip-link, .header, #main, .footer).
imageSelector	string	—	Images that count as the first perspective. Defaults to every image intersecting the first viewport.
onComplete	(skipped: boolean) => void	—	Fires once the shutter is gone; start hero entrances here.

Behaviour notes

Step 01 ticks on document.fonts.ready and step 02 when first-viewport images decode; the · becomes ✓ and the counter and progress line report only what actually settled.
Escape and Skip introduction remove the shutter immediately (no exit animation), as in the source; if the page is already scrolled past 80px on start it skips too.
Body scroll lock and inert regions are released when the shutter hides and on unmount.
Reduced-motion visitors, print and no-JS never see the shutter.

Pattern origin

onycx-logistics ATLAS entrance: starts 350ms after mount; letters rise yPercent 115 → 0 (stagger 0.055, 0.85s power4.out), signature y 16 → 0 over 0.7s at 0.25s; when fonts and hero images settle (at least 850ms, at most 4200ms) the content exits y −24 in 0.35s power2.in and the #141414 halves with #004a6b66 radial glows part −101% / +101% over 0.9s power4.inOut. Word clamp(130px, 27vw, 440px) / 600 / 0.85 / −0.045em; orange #ff5825 progress line.

#preloader#intro#loading#shutter#split#gsap