Preloader Reveal
A system-boot intro that wipes away into a hero. A black preloader draws a circular progress ring and reveals stacked telemetry readouts, settling on an Engage control; engaging collapses the sheet to the left, swaps the label to a granted state, and clip-wipes through to a hero whose headline rises word by word. A white annotation backdrop underneath makes the margins read like a technical document mid-assembly. GSAP timeline with CustomEase; runs on a loop or waits for a click.
ARC 117 Delta Trace
Sector / Hollow Frame
0.392 02SD 008923
Material / Unknown Fiber
Status / Soft Resonance

:::..:::.::::..:::
Surface Memory
// / / ///// / / / ///
Phase Offset > 17%
Fragments Aligning
Pattern Emerging
Collapse Pending
Return to Layer Zero
F-9
The system is now visible
Initiating
Phase 01
Sequence
Signal Scan
07 Layers
PX-17

Engage
Access Granted
npx shadcn@latest add https://ui.aryank.space/r/preloader-reveal.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "The system is now visible" | Hero headline, revealed word by word after the wipe. |
| engageLabel / grantedLabel | string | "Engage" / "Access Granted" | Boot control labels before and after engaging. |
| initiatingLabel | string | "Initiating" | Small label in the top-left of the preloader. |
| logo / buttonLogo | string | preloader-reveal/logo.png / logo-light.png | Backdrop annotation mark and the boot control mark. |
| dark / light / muted | string | "#000000" / "#ffffff" / "#7a7a7a" | Surface, ring/ink, and backdrop-note colors. |
| loop | boolean | true | Auto-run the full sequence on a loop (true) or hold until the control is clicked (false). |
dark / light / mutedcolorPreloader and hero surface, the ring and ink, and the backdrop note tint.
headingtextHero headline revealed word by word after the wipe.
engageLabel / grantedLabeltextControl labels before and after engaging.
logo / buttonLogoasset-urlBackdrop and control marks, hosted through https://ui.aryank.space/assets/preloader-reveal/logo.png and the light variant.
gsap