{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comic-text",
  "type": "registry:ui",
  "title": "Comic Text",
  "description": "Comic text animation",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/magicui/comic-text.tsx",
      "content": "\"use client\"\n\nimport { type CSSProperties } from \"react\"\nimport { motion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype ComicTextProps = {\n  children: string\n  className?: string\n  style?: CSSProperties\n  fontSize?: number\n}\n\nexport function ComicText({\n  children,\n  className,\n  style,\n  fontSize = 5,\n}: ComicTextProps) {\n  if (typeof children !== \"string\") {\n    throw new Error(\"children must be a string\")\n  }\n\n  const dotColor = \"#EF4444\"\n  const backgroundColor = \"#FACC15\"\n\n  return (\n    <motion.div\n      className={cn(\"text-center select-none\", className)}\n      style={{\n        fontSize: `${fontSize}rem`,\n        fontFamily: \"'Bangers', 'Comic Sans MS', 'Impact', sans-serif\",\n        fontWeight: \"900\",\n        WebkitTextStroke: `${fontSize * 0.35}px #000000`, // Thick black outline\n        transform: \"skewX(-10deg)\",\n        textTransform: \"uppercase\",\n        filter: `\n          drop-shadow(5px 5px 0px #000000) \n          drop-shadow(3px 3px 0px ${dotColor})\n        `,\n        backgroundColor: backgroundColor,\n        backgroundImage: `radial-gradient(circle at 1px 1px, ${dotColor} 1px, transparent 0)`,\n        backgroundSize: \"8px 8px\",\n        backgroundClip: \"text\",\n        WebkitBackgroundClip: \"text\",\n        WebkitTextFillColor: \"transparent\",\n        ...style,\n      }}\n      initial={{ opacity: 0, scale: 0.8, rotate: -2 }}\n      animate={{ opacity: 1, scale: 1, rotate: 0 }}\n      transition={{\n        duration: 0.6,\n        ease: [0.175, 0.885, 0.32, 1.275],\n        type: \"spring\",\n      }}\n    >\n      {children}\n    </motion.div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}