Home

Independent studio for motion-first interfaces.

Click the nav ↗

Controls

variant

durations

color

foreground

accent

label

columns

ease

Page Transition

Route transitions for the App Router: a provider covers the page, navigates, waits for the new route to render, then reveals it. Curtain, stairs, iris from the click point, card-deck slide and blinds.

Open in v0

$ pnpm dlx shadcn@latest add @tweenly/page-transition

import { PageTransitionProvider } from "@/components/page-transition"

// app/layout.tsx: wrap your pages once with the provider below.
// Then, anywhere inside, swap <a> / <Link> for <TransitionLink>:
//
//   import { TransitionLink, usePageTransition } from "@/components/page-transition"
//
//   <TransitionLink href="/work">Work</TransitionLink>
//
//   const { navigate, isTransitioning } = usePageTransition()
//   navigate("/about", { label: "About" })

export function Demo() {
  return (
    <PageTransitionProvider>
      {children}
    </PageTransitionProvider>
  )
}

Updates live as you change the controls. Only non-default props are included.