Revealer Transition Page
A four route studio site with two layers of transition. On arrival a solid panel scaled to full height shrinks away from its top edge, wiping the page in. On navigation the View Transition API animates the incoming snapshot from a small centered rectangle out to the full frame, so the new page grows through a window in the old one rather than sliding over it. Each route then splits and staggers its own copy, by character on the home hero and by word elsewhere.
npx shadcn@latest add https://ui.aryank.space/r/revealer-transition-page.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 |
|---|---|---|---|
| assetBase | string | Blob asset base | Base URL for the hero, work, and studio imagery. |
| brand / location / studioCopy / contactEmails / socials | string / string[] | BLANK copy | Site copy across the four routes. |
| initialPath | RevealerRoute | "/" | Which route the internal router starts on. |
studioCopy / contactEmailstextStudio paragraph and the contact addresses.
gsaplenis