Layout/PageTransition

PageTransition

Wraps page content with smooth enter/exit animations on route change. Drop it into your root layout once and every page transition is animated.

import { PageTransition } from "@animui/ui"

Setup

Place PageTransition in your root layout, wrapping {children}.

app/layout.tsx

// app/layout.tsx
import { PageTransition } from "@animui/ui";

export default function RootLayout({ children, params }) {
  return (
    <html><body>
      <PageTransition transitionKey={params?.slug ?? "/"}>
        {children}
      </PageTransition>
    </body></html>
  );
}

Variants

fade

Opacity 0 → 1

slide-up

Y 24px → 0

slide-left

X 40px → 0

scale

Scale 0.96 → 1

blur

Blur 8px → 0

Custom duration

transitionKey="my-page"

variant="slide-up"

duration={0.4}

Props

Prop	Type	Default	Description
`transitionKey`	`string`	—	Required. A unique key per page/route — changing it triggers the enter/exit animation.
`children`	`ReactNode`	—	The page content to animate.
`variant`	`"fade" \| "slide-up" \| "slide-left" \| "scale" \| "blur"`	`"fade"`	The animation type applied on enter and exit.
`duration`	`number`	`0.35`	Animation duration in seconds.
`className`	`string`	—	Additional classes for the animated wrapper.

App Router note

In Next.js App Router, add "use client" to the layout file that contains PageTransition, since it uses Motion hooks internally.