Browse components
Page Transition
A staggered, layered column curtain that covers the old view, swaps content, then sweeps away to reveal the new one.
Installation
npx shadcn@latest add @glint-ui/page-transitionFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/page-transition.json
Usage
import { PageTransition } from "@/components/ui/page-transition";
<PageTransition transitionKey={tab}>
{views[tab]}
</PageTransition>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| transitionKey | string | — | Change it (tab id, route) to play the transition. |
| children | ReactNode | — | The current view. |
| columns | number | 5 | Curtain columns; 1 is a plain wipe. |
| colors | string[] | ["#c6ff3d","#18181b"] | Curtain layers, back to front. |
| duration | number | 550 | Ms for each half. |
| stagger | number | 55 | Ms between columns. |
| direction | "up" | "down" | "up" | Direction the curtain travels. |
| className | string | — | Extra classes for the root element. |