PRO

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.

Page
Install
npx shadcn@latest add https://ui.aryank.space/r/block-logo-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
assetBase / archiveImagesstring / string[]Blob asset basePhotographs listed on the archive route.
brand / homeHeading / contactHeadingstringBLANK copyNav wordmark and the route headings.
initialPathBlockLogoRoute"/"Which route the internal router starts on.
Customize
homeHeading / contactHeadingtext

The two oversized route headings.

Dependencies
gsaplenis