PRO

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.

Component

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

Install
npx shadcn@latest add https://ui.aryank.space/r/preloader-reveal.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
headingstring"The system is now visible"Hero headline, revealed word by word after the wipe.
engageLabel / grantedLabelstring"Engage" / "Access Granted"Boot control labels before and after engaging.
initiatingLabelstring"Initiating"Small label in the top-left of the preloader.
logo / buttonLogostringpreloader-reveal/logo.png / logo-light.pngBackdrop annotation mark and the boot control mark.
dark / light / mutedstring"#000000" / "#ffffff" / "#7a7a7a"Surface, ring/ink, and backdrop-note colors.
loopbooleantrueAuto-run the full sequence on a loop (true) or hold until the control is clicked (false).
Customize
dark / light / mutedcolor

Preloader and hero surface, the ring and ink, and the backdrop note tint.

headingtext

Hero headline revealed word by word after the wipe.

engageLabel / grantedLabeltext

Control labels before and after engaging.

logo / buttonLogoasset-url

Backdrop and control marks, hosted through https://ui.aryank.space/assets/preloader-reveal/logo.png and the light variant.

Dependencies
gsap