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 @compronents/block-logo-transition-page

Installs from ui.aryank.space. Needs a registry token and a one-time @compronents entry in components.json. The docs walk through both.

Files
Checking access…
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