{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-transition",
  "type": "registry:ui",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "page-transition.tsx",
      "target": "components/ui/page-transition.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport type * as React from \"react\";\n\nexport interface PageTransitionProps {\n  /** Change this per route (e.g. the pathname) to trigger the transition. */\n  routeKey: string;\n  children: React.ReactNode;\n}\n\n/**\n * Framework-neutral route transition: fade and lift in, soft lift out. Pass the\n * current route as `routeKey` (e.g. `usePathname()` in Next, `location.pathname`\n * elsewhere). Collapses to a plain render under reduced motion.\n */\nexport function PageTransition({ routeKey, children }: PageTransitionProps) {\n  const reduced = useReducedMotion();\n  if (reduced) return <>{children}</>;\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      <motion.div\n        key={routeKey}\n        initial={{ opacity: 0, y: 20 }}\n        animate={{\n          opacity: 1,\n          y: 0,\n          transition: { duration: 0.38, ease: [0.22, 1, 0.36, 1] },\n        }}\n        exit={{\n          opacity: 0,\n          y: -12,\n          transition: { duration: 0.22, ease: [0.4, 0, 1, 1] },\n        }}\n      >\n        {children}\n      </motion.div>\n    </AnimatePresence>\n  );\n}\n"
    }
  ]
}