{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "not-found-07",
  "title": "Not Found 07",
  "description": "A humorous 404 not found block with a glitch effect",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "src/registry/blocks/radix/not-found-07/components/not-found.tsx",
      "content": "import Link from \"next/link\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport GlitchText from \"./glitch-text\";\n\nexport default function NotFound() {\n  return (\n    <div className=\"flex min-h-screen flex-col items-center justify-center px-6 text-center\">\n      <div className=\"relative select-none\">\n        <GlitchText\n          className=\"tracking-[0.15em]\"\n          enableOnHover={false}\n          enableShadows\n          speed={1}\n        >\n          404\n        </GlitchText>\n      </div>\n      <h1 className=\"mt-2 font-semibold text-2xl tracking-tight\">\n        You found the void\n      </h1>\n      <p className=\"mt-3 max-w-sm text-muted-foreground\">\n        This page doesn&apos;t exist, but you found it anyway. Unfortunately,\n        there&apos;s nothing here — just empty space and broken dreams.\n      </p>\n      <div className=\"mt-8 flex gap-3\">\n        <Button asChild>\n          <Link href=\"/\">Escape the void</Link>\n        </Button>\n        <Button asChild variant=\"outline\">\n          <Link href=\"/contact\">Send a distress signal</Link>\n        </Button>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "src/registry/blocks/radix/not-found-07/components/glitch-text.tsx",
      "content": "import type { CSSProperties, FC } from \"react\";\n\ninterface GlitchTextProps {\n  children: string;\n  speed?: number;\n  enableShadows?: boolean;\n  enableOnHover?: boolean;\n  className?: string;\n}\n\ninterface CustomCSSProperties extends CSSProperties {\n  \"--after-duration\": string;\n  \"--before-duration\": string;\n  \"--after-shadow\": string;\n  \"--before-shadow\": string;\n}\n\nconst GlitchText: FC<GlitchTextProps> = ({\n  children,\n  speed = 0.5,\n  enableShadows = true,\n  enableOnHover = false,\n  className = \"\",\n}) => {\n  const inlineStyles: CustomCSSProperties = {\n    \"--after-duration\": `${speed * 3}s`,\n    \"--before-duration\": `${speed * 2}s`,\n    \"--after-shadow\": enableShadows ? \"-5px 0 red\" : \"none\",\n    \"--before-shadow\": enableShadows ? \"5px 0 cyan\" : \"none\",\n  };\n\n  const baseClasses =\n    \"text-foreground text-[clamp(2rem,10vw,8rem)] font-black relative mx-auto select-none cursor-pointer\";\n\n  const pseudoClasses = enableOnHover\n    ? \"after:content-[''] after:absolute after:top-0 after:left-[10px] after:text-white after:bg-muted/5 after:overflow-hidden after:[clip-path:inset(0_0_0_0)] after:opacity-0 \" +\n      \"before:content-[''] before:absolute before:top-0 before:left-[-10px] before:text-white before:bg-muted/5 before:overflow-hidden before:[clip-path:inset(0_0_0_0)] before:opacity-0 \" +\n      \"hover:after:content-[attr(data-text)] hover:after:opacity-100 hover:after:[text-shadow:var(--after-shadow)] hover:after:animate-glitch-after \" +\n      \"hover:before:content-[attr(data-text)] hover:before:opacity-100 hover:before:[text-shadow:var(--before-shadow)] hover:before:animate-glitch-before\"\n    : \"after:content-[attr(data-text)] after:absolute after:top-0 after:left-[10px] after:text-foreground after:bg-muted/5 after:overflow-hidden after:[clip-path:inset(0_0_0_0)] after:[text-shadow:var(--after-shadow)] after:animate-glitch-after \" +\n      \"before:content-[attr(data-text)] before:absolute before:top-0 before:left-[-10px] before:text-foreground before:bg-muted/5 before:overflow-hidden before:[clip-path:inset(0_0_0_0)] before:[text-shadow:var(--before-shadow)] before:animate-glitch-before\";\n\n  const combinedClasses = `${baseClasses} ${pseudoClasses} ${className}`;\n\n  return (\n    <div className={combinedClasses} data-text={children} style={inlineStyles}>\n      {children}\n    </div>\n  );\n};\n\nexport default GlitchText;",
      "type": "registry:component"
    }
  ],
  "cssVars": {
    "theme": {
      "--animate-glitch-after": "glitch var(--after-duration) infinite linear alternate-reverse",
      "--animate-glitch-before": "glitch var(--before-duration) infinite linear alternate-reverse"
    }
  },
  "css": {
    "@keyframes glitch": {
      "0%": {
        "clip-path": "inset(20% 0 50% 0)"
      },
      "5%": {
        "clip-path": "inset(10% 0 60% 0)"
      },
      "10%": {
        "clip-path": "inset(15% 0 55% 0)"
      },
      "15%": {
        "clip-path": "inset(25% 0 35% 0)"
      },
      "20%": {
        "clip-path": "inset(30% 0 40% 0)"
      },
      "25%": {
        "clip-path": "inset(40% 0 20% 0)"
      },
      "30%": {
        "clip-path": "inset(10% 0 60% 0)"
      },
      "35%": {
        "clip-path": "inset(15% 0 55% 0)"
      },
      "40%": {
        "clip-path": "inset(25% 0 35% 0)"
      },
      "45%": {
        "clip-path": "inset(30% 0 40% 0)"
      },
      "50%": {
        "clip-path": "inset(20% 0 50% 0)"
      },
      "55%": {
        "clip-path": "inset(10% 0 60% 0)"
      },
      "60%": {
        "clip-path": "inset(15% 0 55% 0)"
      },
      "65%": {
        "clip-path": "inset(25% 0 35% 0)"
      },
      "70%": {
        "clip-path": "inset(30% 0 40% 0)"
      },
      "75%": {
        "clip-path": "inset(40% 0 20% 0)"
      },
      "80%": {
        "clip-path": "inset(20% 0 50% 0)"
      },
      "85%": {
        "clip-path": "inset(10% 0 60% 0)"
      },
      "90%": {
        "clip-path": "inset(15% 0 55% 0)"
      },
      "95%": {
        "clip-path": "inset(25% 0 35% 0)"
      },
      "100%": {
        "clip-path": "inset(30% 0 40% 0)"
      }
    }
  },
  "type": "registry:block"
}