pleate.uiEffects
Effects

Page Transition

Animated page entrances for the App Router, used in app/template.tsx. "slide" pushes from the trailing side and reverses on Back. This docs site uses it.
import { PageTransition, useNavigationDirection } from "pleate/effects/page-transition";

Variants

Switch pages between the docs to see fade-up in action.

Lisbon

Props

variant

Entrance.

"fade" | "fade-up" | "slide"default "fade-up"

useNavigationDirection()

How the current page was reached.

→ "forward" | "back"

Accessibility

  • Scrolls to the top on forward navigation; Back keeps the browser's restored position.
  • No animation with reduced motion.