{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "not-found-with-glitchytext",
  "type": "registry:block",
  "title": "Not Found with GlitchyText",
  "description": "A clean 404 page with glitch animation and smooth reveal transitions.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["motion"],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/not-found/not-found-with-glitchytext.tsx",
      "content": "'use client';\n\nimport { motion } from 'motion/react';\n\nfunction GlitchText({ text }: { text: string }) {\n  return (\n    <span className='relative inline-block'>\n      <span className='relative z-10'>{text}</span>\n      <motion.span\n        aria-hidden\n        className='absolute inset-0 text-cyan-500/60 dark:text-cyan-400/50'\n        animate={{ x: [0, 3, -3, 0], opacity: [1, 0.8, 0.8, 1] }}\n        transition={{ duration: 0.15, repeat: Infinity, repeatDelay: 4, delay: 0.05 }}\n      >\n        {text}\n      </motion.span>\n    </span>\n  );\n}\n\nexport default function NotFoundwithGlitchyText() {\n  return (\n    <div className='min-h-screen w-full bg-zinc-50 dark:bg-zinc-950 flex flex-col items-center justify-center overflow-hidden transition-colors duration-500'>\n      <div className='flex flex-col items-center text-center px-6 max-w-2xl mx-auto'>\n        <motion.div\n          initial={{ opacity: 0, scale: 0.92 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}\n          className='relative select-none mb-6'\n        >\n          <span\n            className='block text-[clamp(7rem,22vw,14rem)] font-black leading-none tracking-tighter text-transparent'\n            style={{\n              WebkitTextStroke: '2px',\n              WebkitTextStrokeColor: 'color-mix(in srgb, currentColor 18%, transparent)',\n              fontFamily: '\"Courier New\", monospace',\n            }}\n          >\n            <GlitchText text='404' />\n          </span>\n\n          <motion.div\n            className='absolute inset-0 flex items-center justify-center'\n            animate={{ opacity: [0.05, 0.12, 0.05] }}\n            transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}\n          >\n            <span\n              className='block text-[clamp(7rem,22vw,14rem)] font-black leading-none tracking-tighter text-zinc-900 dark:text-white blur-2xl'\n              style={{ fontFamily: '\"Courier New\", monospace' }}\n            >\n              404\n            </span>\n          </motion.div>\n        </motion.div>\n\n        <motion.div\n          initial={{ opacity: 0, y: 8 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.45, delay: 0.25, ease: 'easeOut' }}\n          className='mb-2 flex items-center gap-2'\n        >\n          <span className='h-px w-8 bg-zinc-400 dark:bg-zinc-600' />\n          <span className='font-mono text-xs uppercase tracking-[0.2em] text-zinc-500 dark:text-zinc-400'>\n            Error / Page not found\n          </span>\n          <span className='h-px w-8 bg-zinc-400 dark:bg-zinc-600' />\n        </motion.div>\n\n        <motion.h2\n          initial={{ opacity: 0, y: 12 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.5, delay: 0.35, ease: 'easeOut' }}\n          className='text-2xl md:text-4xl font-bold tracking-tight text-zinc-900 dark:text-white mb-4'\n          style={{ fontFamily: '\"Courier New\", monospace' }}\n        >\n          This page doesn&apos;t exist.\n        </motion.h2>\n\n        <motion.p\n          initial={{ opacity: 0, y: 8 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.45, delay: 0.45, ease: 'easeOut' }}\n          className='text-sm md:text-base text-zinc-500 dark:text-zinc-400 max-w-sm leading-relaxed mb-10 font-mono'\n        >\n          The page you&apos;re looking for has been removed, renamed, or never existed.\n        </motion.p>\n\n        <motion.div\n          initial={{ opacity: 0, y: 8 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.4, delay: 0.55 }}\n          className='flex flex-col sm:flex-row gap-3'\n        >\n          <motion.button\n            whileHover={{ scale: 1.03 }}\n            whileTap={{ scale: 0.97 }}\n            className='inline-flex items-center gap-2 rounded-none border border-zinc-900 bg-zinc-900 px-6 py-2.5 text-sm font-mono font-semibold text-zinc-50 transition-colors hover:bg-zinc-800 dark:border-zinc-100 dark:bg-zinc-100 dark:text-zinc-950 dark:hover:bg-zinc-200'\n          >\n            <svg\n              xmlns='http://www.w3.org/2000/svg'\n              width='16'\n              height='16'\n              viewBox='0 0 24 24'\n              fill='none'\n              stroke='currentColor'\n              strokeWidth='2'\n              strokeLinecap='round'\n              strokeLinejoin='round'\n              aria-hidden='true'\n            >\n              <path d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8' />\n              <path d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' />\n            </svg>\n            Go Home\n          </motion.button>\n\n          <motion.button\n            whileHover={{ scale: 1.03 }}\n            whileTap={{ scale: 0.97 }}\n            className='inline-flex items-center gap-2 rounded-none border border-zinc-300 bg-transparent px-6 py-2.5 text-sm font-mono font-semibold text-zinc-700 transition-colors hover:border-zinc-500 hover:text-zinc-900 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-400 dark:hover:text-zinc-100'\n          >\n            <svg\n              xmlns='http://www.w3.org/2000/svg'\n              width='16'\n              height='16'\n              viewBox='0 0 24 24'\n              fill='none'\n              stroke='currentColor'\n              strokeWidth='2'\n              strokeLinecap='round'\n              strokeLinejoin='round'\n              aria-hidden='true'\n            >\n              <path d='M19 12H5' />\n              <path d='m12 5-7 7 7 7' />\n            </svg>\n            Go Back\n          </motion.button>\n        </motion.div>\n\n        <motion.p\n          initial={{ opacity: 0 }}\n          animate={{ opacity: 1 }}\n          transition={{ duration: 0.4, delay: 0.75 }}\n          className='mt-12 font-mono text-[10px] uppercase tracking-[0.25em] text-zinc-400 dark:text-zinc-600'\n        >\n          HTTP 404 &mdash; Not Found\n        </motion.p>\n      </div>\n    </div>\n  );\n}"
    }
  ]
}