Panel Assembly Transition

A page transition where full-width panels sweep in to build a cover, a heading rises word by word through masks, and everything retracts to show the new page.

Open in

panel-assembly-transition-demo

Descent

components/ui/panel-assembly-transition-demo.tsx

import { PanelAssemblyTransition } from "@/registry/tween/panel-assembly-transition"

export function PanelAssemblyTransitionDemo() {
  return <PanelAssemblyTransition />
}

Installation


pnpm dlx shadcn@latest add https://tweenui.dev/r/panel-assembly-transition.json

Usage

import { PanelAssemblyTransition } from "@/components/ui/panel-assembly-transition"

<PanelAssemblyTransition
  brand="Orrin"
  heading="Orrin Landscape Office"
  pages={[
    { label: "Index", content: <IndexPage /> },
    { label: "Gardens", content: <GardensPage /> },
    { label: "Office", content: <OfficePage /> },
  ]}
/>

The component is a small self-contained site: a relative overflow-hidden container with a nav and one page visible at a time. Clicking a link runs the transition:

Assemble. rows full-width panels (default 4) scale scaleX 0 → 1 from the left over 1s on a hop curve (cubic-bezier(0.9, 0, 0.1, 1)), 0.075s apart. 0.6s before they finish, the heading's words rise from y: 100% to 0% through their masks (power4.out, 0.1s apart).
Swap. The active page changes under the cover.
Retract. The words drop back to 100% while the panels, now anchored on the right, scale back to 0 on the same hop curve.

The heading is split with GSAP SplitText (type: "words", mask: "words") after document.fonts.ready, and the split is reverted on unmount. The overlay blocks pointer events while it is up. Clicks are ignored mid-transition. With prefers-reduced-motion: reduce, the page swaps instantly.

Props

Prop	Type	Default	Description
`pages`	`PanelAssemblyPage[]`	4 default pages	Each page is `{ label, content }`. One link per page.
`brand`	`string`	`"Velhaus"`	Brand text top-left. Clicking it goes to the first page.
`heading`	`string`	`"Velhaus Atelier"`	Text that rises on the panels mid-transition.
`rows`	`number`	`4`	Number of horizontal panels.
`panelColor`	`string`	`"#ebe4d8"`	Fill colour of the panels.
`headingColor`	`string`	`"#1c1814"`	Colour of the transition heading.
`defaultIndex`	`number`	`0`	Index of the page shown first.
`onPageChange`	`(index: number) => void`	—	Called with the new index when the page swaps.
`className`	`string`	—	Extra classes on the outer container.

Tile Grid Loader Fractal Glass Hero

On This Page

Installation Usage Props

Contribute