Clip Mask Transition Page
A three route site whose page changes are driven by the browser's own View Transition API rather than a JS timeline. The outgoing page lifts and fades while the incoming one rises and opens from a flat clip path at the bottom edge, so the new page appears to unroll over the old. The navbar is given its own transition name and told not to animate, so it stays pinned and perfectly still while everything behind it changes.
npx shadcn@latest add https://ui.aryank.space/r/clip-mask-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 the three route backdrops are loaded from. |
| initialPath | ClipMaskRoute | "/" | Which route the internal router starts on. |
brandtextThe wordmark in the fixed nav.
None.