PRO

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.

Page
Install
npx shadcn@latest add https://ui.aryank.space/r/clip-mask-transition-page.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
PropTypeDefaultDescription
assetBasestringBlob asset baseBase URL the three route backdrops are loaded from.
initialPathClipMaskRoute"/"Which route the internal router starts on.
Customize
brandtext

The wordmark in the fixed nav.

Dependencies
None.