Preloader Panel Reveal

A one-shot intro: two columns of masked copy and a glitching NN counter animate over a black panel while a center square grows in stepped scales to full frame, then the panel wipes up and out as the nav, hero image, and product card slide up into place.

Component

Handpicked collections shaped by artistry, balancing rare elements with a focus on purity.

Explore timeless essentials built with care, thoughtfully designed to guide you.

[ Ember No. 04 ]

View the Collection

Install

npx shadcn@latest add @compronents/preloader-panel-reveal

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files

Checking access…

API

Prop	Type	Default	Description
heroImage	string	BLANK-hosted JPG	Hero image revealed behind the preloader.
copyColumns	[string, string]	Two studio blurbs	The two masked copy columns in the preloader.
navLinks	string[]	4 nav items	Links in the revealed nav bar.

Customize

navLinks / copyColumnslinks

Nav items and the two preloader copy columns.

logo / productName / productLinktext

The wordmark and the hero product card copy.

Dependencies

gsap