Wrap your page content and animate it in whenever the route changes. Fade, slide, blur or a curtain wipe.
npx shadcn@latest add https://hyperblur.dev/r/page-transition.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/page-transition.tsx.
import { PageTransition } from "@/components/hyperblur/page-transition"
const pathname = usePathname();
<PageTransition routeKey={pathname} variant="slide-up">{children}</PageTransition>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Page content to animate. |
| routeKey | string | number | required | Any value that changes between pages, usually usePathname(). A new value replays the transition. |
| variant | "fade" | "slide-up" | "slide-left" | "blur" | "curtain" | "fade" | Which animation plays. With reduced motion every variant becomes a plain crossfade. |
| duration | number | 0.45 | Seconds the transition takes. |
| initial | boolean | false | Also animate on first mount, not only on route changes. |