Landing Image Reveal

A load intro where a progress bar wipes away, five scattered images slide in and line up across the frame, then the outer pairs fly off-screen while the center image scales up to fill the hero. The nav, headline, and contact lines reveal in masked lines on top. GSAP timeline with SplitText, Blob-hosted images.

Component

We design objects that carry the weight of their own conviction, where every curve and joint exists not for beauty but because the material demanded it.

Install

npx shadcn@latest add https://ui.aryank.space/r/landing-image-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

Prop	Type	Default	Description
images	[string, string, string, string, string]	Blob-hosted img-1..5	The five images; the third is the center hero image.
heading / logo / navItems / email	string / string[]	BLANK copy	Hero and nav copy.

Customize

heading / logo / navItems / emailtext

Hero headline, wordmark, nav links, and contact email.

imagesasset-url

The five hero images, starting at https://ui.aryank.space/assets/landing-image-reveal/img-1.jpg.

Dependencies

gsap

We design objects that carry the weight of their own conviction, where every curve and joint exists not for beauty but because the material demanded it.

components

ui