Block Logo Transition Page
A three route site whose transitions are built from twenty vertical blocks. Leaving a page, the blocks scale out from their left edge on a two hundredth of a second stagger, sweeping the screen shut; arriving, they collapse from the right, so the wipe never reverses direction. While the screen is covered, a mark draws itself: its path length is measured at runtime and used as the dash offset, so the stroke traces on before the fill arrives.
npx shadcn@latest add https://ui.aryank.space/r/block-logo-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 / archiveImages | string / string[] | Blob asset base | Photographs listed on the archive route. |
| brand / homeHeading / contactHeading | string | BLANK copy | Nav wordmark and the route headings. |
| initialPath | BlockLogoRoute | "/" | Which route the internal router starts on. |
homeHeading / contactHeadingtextThe two oversized route headings.
gsaplenis