PRO

Block Page Transition

A four-row page transition that wipes across the viewport, reveals a centered wordmark, swaps the full-screen scene, then retracts from the opposite edge. It includes three navigable image scenes and the original GSAP stagger and easing cadence.

Component

Genesis

BLANK Studio

Install
npx shadcn@latest add https://ui.aryank.space/r/block-page-transition.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
scenesBlockPageTransitionScene[]Genesis, Threshold, SanctumFull-screen scenes switched by the navigation.
brand / transitionTextstring"Emberfall" / "BLANK Studio"Persistent navigation brand and transition overlay copy.
Customize
sceneslinks

Navigation label and Blob image for each scene.

brand / transitionTexttext

Top-left brand and the wordmark shown during each wipe.

Dependencies
gsap