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 @compronents/revealer-transition-pageInstalls from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.
Checking access…
| 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