PRO

View Transition Folio Page

A three route photographer folio where the page change is handled entirely by the View Transition API. The old page lifts a third of a screen and fades while the new one opens upward from a flat clip path, so the arriving page unrolls over the departing one rather than crossfading. Entrance animations re-run on every route: nav links roll up from behind their clip, the hero name splits into characters, and about copy climbs line by line.

Page
Install
npx shadcn@latest add https://ui.aryank.space/r/view-transition-folio-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
assetBase / workImages / portraitImagestring / string[]Blob asset baseWork grid photographs and the about portrait.
name / aboutCopy / initialPathstring / FolioRouteBLANK copyFolio copy and the route the internal router starts on.
Customize
name / aboutCopytext

The hero wordmark and the about paragraph.

Dependencies
gsaplenis