{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "DesignX <ui@designx.dev>",
  "name": "not-found",
  "type": "registry:component",
  "title": "Not Found",
  "description": "Five animated 404 pages — glitch, magnetic, spotlight, stacked and terminal.",
  "dependencies": [
    "motion@^14.0.0"
  ],
  "registryDependencies": [
    "@dx/lib-ease",
    "@dx/text-reveal",
    "@dx/utils"
  ],
  "files": [
    {
      "path": "components/motion/not-found/index.tsx",
      "type": "registry:component",
      "target": "components/motion/not-found/index.tsx",
      "content": "export { NotFoundGlitch } from \"./glitch\";\nexport { NotFoundMagnetic } from \"./magnetic\";\nexport { NotFoundSpotlight } from \"./spotlight\";\nexport { NotFoundStacked } from \"./stacked\";\nexport { NotFoundTerminal } from \"./terminal\";\nexport {\n  NOT_FOUND_DEFAULTS,\n  NotFoundActions,\n  NotFoundStage,\n  type NotFoundProps,\n} from \"./shared\";\n"
    },
    {
      "path": "components/motion/not-found/glitch.tsx",
      "type": "registry:component",
      "target": "components/motion/not-found/glitch.tsx",
      "content": "import { useEffect, useState } from \"react\";\nimport { useReducedMotion } from \"motion/react\";\nimport {\n  NOT_FOUND_DEFAULTS,\n  NotFoundActions,\n  NotFoundStage,\n  type NotFoundProps,\n} from \"./shared\";\n\nconst GLYPHS = \"ABCDEFGHJKLMNPQRSTUVWXYZ0123456789#%&@$?/\\\\\";\nconst SCRAMBLE_MS = 700;\nconst TICK_MS = 45;\n\n/**\n * Renders the code, scrambling each character on mount before it settles.\n * SSR and the first paint show the real code, so the scramble is a pure\n * client-side enhancement and reduced-motion users see the code immediately.\n */\nfunction Scramble({ text }: { text: string }) {\n  const reduce = useReducedMotion();\n  const [display, setDisplay] = useState(text);\n\n  useEffect(() => {\n    if (reduce) {\n      setDisplay(text);\n      return;\n    }\n    const chars = text.split(\"\");\n    const start = performance.now();\n    let raf = 0;\n    let last = 0;\n\n    const loop = (now: number) => {\n      if (now - last >= TICK_MS) {\n        last = now;\n        const progress = Math.min((now - start) / SCRAMBLE_MS, 1);\n        const settled = Math.floor(progress * chars.length);\n        setDisplay(\n          chars\n            .map((ch, i) =>\n              i < settled || ch === \" \"\n                ? ch\n                : GLYPHS[Math.floor(Math.random() * GLYPHS.length)],\n            )\n            .join(\"\"),\n        );\n      }\n      if (now - start < SCRAMBLE_MS) {\n        raf = requestAnimationFrame(loop);\n      } else {\n        setDisplay(text);\n      }\n    };\n    raf = requestAnimationFrame(loop);\n    return () => cancelAnimationFrame(raf);\n  }, [text, reduce]);\n\n  return <span className=\"tabular-nums\">{display}</span>;\n}\n\nexport function NotFoundGlitch({\n  className,\n  code = NOT_FOUND_DEFAULTS.code,\n  title = NOT_FOUND_DEFAULTS.title,\n  description = NOT_FOUND_DEFAULTS.description,\n  homeHref,\n  homeLabel,\n  browseHref,\n  browseLabel,\n}: NotFoundProps) {\n  return (\n    <NotFoundStage className={className}>\n      <div className=\"group relative select-none font-mono font-bold leading-none tracking-tighter text-foreground [font-size:clamp(5rem,18vw,11rem)]\">\n        {/* Chromatic ghost layers, nudged apart on hover. */}\n        <span\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 text-[#ff0040] opacity-0 mix-blend-screen transition-[transform,opacity] duration-150 ease-out group-hover:translate-x-[3px] group-hover:opacity-70 motion-reduce:hidden\"\n        >\n          <Scramble text={code} />\n        </span>\n        <span\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0 text-[#00e5ff] opacity-0 mix-blend-screen transition-[transform,opacity] duration-150 ease-out group-hover:-translate-x-[3px] group-hover:opacity-70 motion-reduce:hidden\"\n        >\n          <Scramble text={code} />\n        </span>\n        <h1 className=\"relative\">\n          <Scramble text={code} />\n        </h1>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">\n        <p className=\"text-lg font-semibold text-foreground\">{title}</p>\n        <p className=\"max-w-sm text-sm text-muted-foreground\">{description}</p>\n      </div>\n\n      <NotFoundActions\n        homeHref={homeHref}\n        homeLabel={homeLabel}\n        browseHref={browseHref}\n        browseLabel={browseLabel}\n      />\n    </NotFoundStage>\n  );\n}\n"
    },
    {
      "path": "components/motion/not-found/magnetic.tsx",
      "type": "registry:component",
      "target": "components/motion/not-found/magnetic.tsx",
      "content": "import { Magnetic } from \"@/components/motion/magnetic\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  NOT_FOUND_DEFAULTS,\n  NotFoundActions,\n  NotFoundStage,\n  type NotFoundProps,\n} from \"./shared\";\n\nexport function NotFoundMagnetic({\n  className,\n  code = NOT_FOUND_DEFAULTS.code,\n  title = NOT_FOUND_DEFAULTS.title,\n  description = NOT_FOUND_DEFAULTS.description,\n  homeHref,\n  homeLabel,\n  browseHref,\n  browseLabel,\n}: NotFoundProps) {\n  const chars = code.split(\"\");\n\n  return (\n    <NotFoundStage className={className}>\n      <h1\n        aria-label={code}\n        className=\"flex select-none items-center justify-center font-bold leading-none tracking-tighter text-foreground [font-size:clamp(5rem,18vw,12rem)]\"\n      >\n        {chars.map((ch, i) => (\n          <Magnetic\n            key={i}\n            strength={0.6}\n            className={cn(i > 0 && \"-ml-2\")}\n          >\n            <span aria-hidden className=\"inline-block px-1 tabular-nums\">\n              {ch}\n            </span>\n          </Magnetic>\n        ))}\n      </h1>\n\n      <div className=\"flex flex-col items-center gap-2\">\n        <p className=\"text-lg font-semibold text-foreground\">{title}</p>\n        <p className=\"max-w-sm text-sm text-muted-foreground\">{description}</p>\n      </div>\n\n      <NotFoundActions\n        homeHref={homeHref}\n        homeLabel={homeLabel}\n        browseHref={browseHref}\n        browseLabel={browseLabel}\n      />\n    </NotFoundStage>\n  );\n}\n"
    },
    {
      "path": "components/motion/not-found/spotlight.tsx",
      "type": "registry:component",
      "target": "components/motion/not-found/spotlight.tsx",
      "content": "import { useRef } from \"react\";\nimport {\n  motion,\n  useMotionTemplate,\n  useMotionValue,\n  useReducedMotion,\n} from \"motion/react\";\nimport { useHoverCapable } from \"@/lib/hooks/use-hover-capable\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  NOT_FOUND_DEFAULTS,\n  NotFoundActions,\n  NotFoundStage,\n  type NotFoundProps,\n} from \"./shared\";\n\nexport function NotFoundSpotlight({\n  className,\n  code = NOT_FOUND_DEFAULTS.code,\n  title = NOT_FOUND_DEFAULTS.title,\n  description = NOT_FOUND_DEFAULTS.description,\n  homeHref,\n  homeLabel,\n  browseHref,\n  browseLabel,\n}: NotFoundProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const reduce = useReducedMotion();\n  const canHover = useHoverCapable();\n  const enabled = !reduce && canHover;\n\n  const mx = useMotionValue(50);\n  const my = useMotionValue(50);\n  const mask = useMotionTemplate`radial-gradient(220px circle at ${mx}% ${my}%, #000 25%, transparent 72%)`;\n\n  const onMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    const el = ref.current;\n    if (!el || !enabled) return;\n    const rect = el.getBoundingClientRect();\n    mx.set(((e.clientX - rect.left) / rect.width) * 100);\n    my.set(((e.clientY - rect.top) / rect.height) * 100);\n  };\n\n  return (\n    <NotFoundStage className={className}>\n      <motion.div\n        ref={ref}\n        onMouseMove={onMove}\n        className=\"relative isolate flex aspect-[16/9] w-full max-w-xl items-center justify-center overflow-hidden rounded-3xl border border-border bg-neutral-950\"\n      >\n        {/* Dim base layer. */}\n        <span\n          aria-hidden\n          className=\"select-none font-bold leading-none tracking-tighter text-white/10 [font-size:clamp(5rem,16vw,10rem)]\"\n        >\n          {code}\n        </span>\n        {/* Bright layer, revealed only under the spotlight. */}\n        <motion.h1\n          aria-label={code}\n          style={enabled ? { WebkitMaskImage: mask, maskImage: mask } : undefined}\n          className={cn(\n            \"absolute select-none font-bold leading-none tracking-tighter text-white [font-size:clamp(5rem,16vw,10rem)]\",\n            !enabled && \"text-white/90\",\n          )}\n        >\n          <span aria-hidden>{code}</span>\n        </motion.h1>\n      </motion.div>\n\n      <div className=\"flex flex-col items-center gap-2\">\n        <p className=\"text-lg font-semibold text-foreground\">{title}</p>\n        <p className=\"max-w-sm text-sm text-muted-foreground\">{description}</p>\n      </div>\n\n      <NotFoundActions\n        homeHref={homeHref}\n        homeLabel={homeLabel}\n        browseHref={browseHref}\n        browseLabel={browseLabel}\n      />\n    </NotFoundStage>\n  );\n}\n"
    },
    {
      "path": "components/motion/not-found/stacked.tsx",
      "type": "registry:component",
      "target": "components/motion/not-found/stacked.tsx",
      "content": "import { motion, useReducedMotion } from \"motion/react\";\nimport { SPRING_PANEL } from \"@/lib/ease\";\nimport { useHoverCapable } from \"@/lib/hooks/use-hover-capable\";\nimport {\n  NOT_FOUND_DEFAULTS,\n  NotFoundActions,\n  NotFoundStage,\n  type NotFoundProps,\n} from \"./shared\";\n\nconst CARD =\n  \"absolute inset-0 rounded-3xl border border-border bg-card shadow-sm\";\n\nexport function NotFoundStacked({\n  className,\n  code = NOT_FOUND_DEFAULTS.code,\n  title = NOT_FOUND_DEFAULTS.title,\n  description = NOT_FOUND_DEFAULTS.description,\n  homeHref,\n  homeLabel,\n  browseHref,\n  browseLabel,\n}: NotFoundProps) {\n  const reduce = useReducedMotion();\n  const canHover = useHoverCapable();\n  const interactive = !reduce && canHover;\n\n  return (\n    <NotFoundStage className={className}>\n      <motion.div\n        initial=\"rest\"\n        animate=\"rest\"\n        whileHover={interactive ? \"hover\" : undefined}\n        className=\"relative h-44 w-64\"\n      >\n        <motion.div\n          aria-hidden\n          variants={{ rest: { rotate: 0, x: 0, y: 0 }, hover: { rotate: -9, x: -28, y: 8 } }}\n          transition={SPRING_PANEL}\n          className={CARD}\n        />\n        <motion.div\n          aria-hidden\n          variants={{ rest: { rotate: 0, x: 0, y: 0 }, hover: { rotate: 9, x: 28, y: 8 } }}\n          transition={SPRING_PANEL}\n          className={CARD}\n        />\n        <motion.div\n          variants={{ rest: { y: 0 }, hover: { y: -6 } }}\n          transition={SPRING_PANEL}\n          className=\"absolute inset-0 flex flex-col items-center justify-center gap-1 rounded-3xl border border-border bg-card shadow-md\"\n        >\n          <h1 className=\"select-none font-bold leading-none tracking-tighter text-foreground [font-size:clamp(3.5rem,9vw,5rem)]\">\n            {code}\n          </h1>\n          <span className=\"text-xs font-medium uppercase tracking-wide text-muted-foreground\">\n            out of the deck\n          </span>\n        </motion.div>\n      </motion.div>\n\n      <div className=\"flex flex-col items-center gap-2\">\n        <p className=\"text-lg font-semibold text-foreground\">{title}</p>\n        <p className=\"max-w-sm text-sm text-muted-foreground\">{description}</p>\n      </div>\n\n      <NotFoundActions\n        homeHref={homeHref}\n        homeLabel={homeLabel}\n        browseHref={browseHref}\n        browseLabel={browseLabel}\n      />\n    </NotFoundStage>\n  );\n}\n"
    },
    {
      "path": "components/motion/not-found/terminal.tsx",
      "type": "registry:component",
      "target": "components/motion/not-found/terminal.tsx",
      "content": "import { TextReveal } from \"@/components/motion/text-reveal\";\nimport {\n  NOT_FOUND_DEFAULTS,\n  NotFoundActions,\n  NotFoundStage,\n  type NotFoundProps,\n} from \"./shared\";\n\nconst TYPE_SPRING = { stiffness: 320, damping: 30, mass: 0.6 };\n\nexport function NotFoundTerminal({\n  className,\n  code = NOT_FOUND_DEFAULTS.code,\n  title = NOT_FOUND_DEFAULTS.title,\n  description = NOT_FOUND_DEFAULTS.description,\n  homeHref,\n  homeLabel,\n  browseHref,\n  browseLabel,\n}: NotFoundProps) {\n  return (\n    <NotFoundStage className={className}>\n      <div className=\"w-full max-w-md overflow-hidden rounded-xl border border-border bg-neutral-950 text-left shadow-lg\">\n        <div className=\"flex items-center gap-1.5 border-b border-white/10 px-4 py-3\">\n          <span className=\"h-3 w-3 rounded-full bg-[#ff5f57]\" />\n          <span className=\"h-3 w-3 rounded-full bg-[#febc2e]\" />\n          <span className=\"h-3 w-3 rounded-full bg-[#28c840]\" />\n          <span className=\"ml-2 text-xs text-white/40\">~/dx</span>\n        </div>\n        <div className=\"space-y-1.5 p-4 font-mono text-sm leading-relaxed\">\n          <TextReveal\n            as=\"p\"\n            split=\"char\"\n            stagger={0.018}\n            blur={6}\n            yOffset={0}\n            spring={TYPE_SPRING}\n            className=\"text-white/80\"\n            text=\"$ cd /page\"\n          />\n          <TextReveal\n            as=\"p\"\n            split=\"char\"\n            stagger={0.012}\n            delay={0.45}\n            blur={6}\n            yOffset={0}\n            spring={TYPE_SPRING}\n            className=\"text-[#ff5f57]\"\n            text=\"cd: no such file or directory: /page\"\n          />\n          <p className=\"flex items-center text-white/80\">\n            <TextReveal\n              as=\"span\"\n              split=\"char\"\n              stagger={0.018}\n              delay={1.1}\n              blur={6}\n              yOffset={0}\n              spring={TYPE_SPRING}\n              text={`$ status ${code}`}\n            />\n            <span className=\"ml-1 inline-block h-[1.1em] w-[0.55ch] translate-y-[0.12em] bg-white/80 motion-safe:animate-pulse\" />\n          </p>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">\n        <p className=\"text-lg font-semibold text-foreground\">{title}</p>\n        <p className=\"max-w-sm text-sm text-muted-foreground\">{description}</p>\n      </div>\n\n      <NotFoundActions\n        homeHref={homeHref}\n        homeLabel={homeLabel}\n        browseHref={browseHref}\n        browseLabel={browseLabel}\n      />\n    </NotFoundStage>\n  );\n}\n"
    },
    {
      "path": "components/motion/not-found/shared.tsx",
      "type": "registry:component",
      "target": "components/motion/not-found/shared.tsx",
      "content": "import { motion, useReducedMotion } from \"motion/react\";\nimport { SPRING_PRESS } from \"@/lib/ease\";\nimport { useHoverCapable } from \"@/lib/hooks/use-hover-capable\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface NotFoundProps {\n  className?: string;\n  /** The big status code. */\n  code?: string;\n  title?: string;\n  description?: string;\n  homeHref?: string;\n  homeLabel?: string;\n  browseHref?: string;\n  browseLabel?: string;\n}\n\nexport const NOT_FOUND_DEFAULTS = {\n  code: \"404\",\n  title: \"Page not found\",\n  description:\n    \"The page you are looking for moved, vanished, or never existed.\",\n  homeHref: \"/\",\n  homeLabel: \"Back home\",\n  browseHref: \"/components/motion\",\n  browseLabel: \"Browse components\",\n} as const;\n\ntype ActionsProps = Pick<\n  NotFoundProps,\n  \"homeHref\" | \"homeLabel\" | \"browseHref\" | \"browseLabel\" | \"className\"\n>;\n\n/** The shared dual CTA: a primary \"Back home\" and a secondary \"Browse\". */\nexport function NotFoundActions({\n  homeHref = NOT_FOUND_DEFAULTS.homeHref,\n  homeLabel = NOT_FOUND_DEFAULTS.homeLabel,\n  browseHref = NOT_FOUND_DEFAULTS.browseHref,\n  browseLabel = NOT_FOUND_DEFAULTS.browseLabel,\n  className,\n}: ActionsProps) {\n  const reduce = useReducedMotion();\n  const canHover = useHoverCapable();\n  const whileTap = reduce ? undefined : { scale: 0.96 };\n  const whileHover = reduce || !canHover ? undefined : { scale: 1.02 };\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-wrap items-center justify-center gap-3\",\n        className,\n      )}\n    >\n      <motion.a\n        href={homeHref}\n        whileTap={whileTap}\n        whileHover={whileHover}\n        transition={SPRING_PRESS}\n        className=\"inline-flex h-11 select-none items-center justify-center rounded-full bg-primary px-6 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90\"\n      >\n        {homeLabel}\n      </motion.a>\n      <motion.a\n        href={browseHref}\n        whileTap={whileTap}\n        whileHover={whileHover}\n        transition={SPRING_PRESS}\n        className=\"inline-flex h-11 select-none items-center justify-center rounded-full border border-border bg-card px-6 text-sm font-medium text-foreground transition-colors hover:bg-muted/60\"\n      >\n        {browseLabel}\n      </motion.a>\n    </div>\n  );\n}\n\n/** Centers a variant and gives it a consistent minimum stage height. */\nexport function NotFoundStage({\n  className,\n  children,\n}: {\n  className?: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex min-h-[420px] w-full flex-col items-center justify-center gap-8 px-4 text-center\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/motion/magnetic.tsx",
      "type": "registry:component",
      "target": "components/motion/magnetic.tsx",
      "content": "import { motion, useMotionValue, useReducedMotion, useSpring } from \"motion/react\";\nimport { useRef, type ReactNode } from \"react\";\nimport { SPRING_MOUSE } from \"@/lib/ease\";\nimport { useHoverCapable } from \"@/lib/hooks/use-hover-capable\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface MagneticProps {\n  children: ReactNode;\n  strength?: number;\n  className?: string;\n}\n\nexport function Magnetic({ children, strength = 0.35, className }: MagneticProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const reduce = useReducedMotion();\n  const canHover = useHoverCapable();\n  // Decorative cursor-follow: skip on touch (phantom hover) and reduced motion.\n  const enabled = !reduce && canHover;\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n  const sx = useSpring(x, SPRING_MOUSE);\n  const sy = useSpring(y, SPRING_MOUSE);\n\n  const onMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    const el = ref.current;\n    if (!el || !enabled) return;\n    const rect = el.getBoundingClientRect();\n    x.set((e.clientX - rect.left - rect.width / 2) * strength);\n    y.set((e.clientY - rect.top - rect.height / 2) * strength);\n  };\n\n  const onLeave = () => {\n    x.set(0);\n    y.set(0);\n  };\n\n  return (\n    <motion.div\n      ref={ref}\n      onMouseMove={onMove}\n      onMouseLeave={onLeave}\n      style={{ x: sx, y: sy }}\n      className={cn(\"inline-block\", className)}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"
    }
  ],
  "categories": [
    "motion-kit"
  ],
  "meta": {
    "group": "motion",
    "docs": "https://dxuireact.com/docs/components/not-found"
  }
}