{
  "name": "glitch-text",
  "type": "registry:component",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\n/**\n * @author: @dorianbaffier\n * @description: Glitch Text\n * @version: 1.0.0\n * @date: 2025-06-26\n * @license: MIT\n * @website: https://kokonutui.com\n * @github: https://github.com/kokonut-labs/kokonutui\n */\n\nimport { motion } from \"motion/react\";\nimport { useRef } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface GlitchTextProps {\n  text: string;\n  className?: string;\n  glitchIntensity?: \"light\" | \"medium\" | \"heavy\" | \"extreme\";\n  color?:\n    | \"rainbow\"\n    | \"blue\"\n    | \"purple\"\n    | \"cyan\"\n    | \"pink\"\n    | \"orange\"\n    | \"gradient-orange\";\n  backgroundColor?: string;\n  isStatic?: boolean;\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | number;\n  fontWeight?: number;\n  letterSpacing?: number;\n}\n\nconst GlitchText = ({\n  text = \"Glitch Text\",\n  className,\n  glitchIntensity = \"medium\",\n  color = \"gradient-orange\",\n  backgroundColor,\n  isStatic = false,\n  size = \"md\",\n  fontWeight = 700,\n  letterSpacing = 5,\n}: GlitchTextProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Vibrant color schemes\n  const colorSchemes = {\n    rainbow: {\n      primary: \"oklch(0.85 0.2 var(--rainbow-hue, 270))\",\n      before: \"oklch(0.9 0.15 calc(var(--rainbow-hue, 270) + 60))\",\n      after: \"oklch(0.8 0.25 calc(var(--rainbow-hue, 270) - 60))\",\n    },\n    blue: {\n      primary: \"oklch(0.65 0.2 250)\", // Vibrant blue\n      before: \"oklch(0.75 0.15 255)\", // Lighter blue\n      after: \"oklch(0.55 0.25 245)\", // Deeper blue\n    },\n    purple: {\n      primary: \"oklch(0.6 0.22 290)\", // Rich purple\n      before: \"oklch(0.7 0.18 295)\", // Lighter purple\n      after: \"oklch(0.5 0.25 285)\", // Deep purple\n    },\n    cyan: {\n      primary: \"oklch(0.8 0.15 200)\", // Bright cyan\n      before: \"oklch(0.85 0.12 205)\", // Light cyan\n      after: \"oklch(0.7 0.18 195)\", // Deep cyan\n    },\n    pink: {\n      primary: \"oklch(0.7 0.25 330)\", // Vibrant pink\n      before: \"oklch(0.8 0.2 335)\", // Light pink\n      after: \"oklch(0.6 0.28 325)\", // Deep pink\n    },\n    orange: {\n      primary: \"oklch(0.7 0.25 45)\", // Vibrant tangerine orange\n      before: \"oklch(0.85 0.2 40)\", // Warm light orange\n      after: \"oklch(0.6 0.28 50)\", // Deep sunset orange\n    },\n    \"gradient-orange\": {\n      primary:\n        \"linear-gradient(135deg, oklch(0.7 0.25 45) 0%, oklch(0.75 0.28 30) 50%, oklch(0.65 0.3 60) 100%)\",\n      before:\n        \"linear-gradient(135deg, oklch(0.85 0.2 40) 0%, oklch(0.8 0.22 25) 50%, oklch(0.75 0.25 55) 100%)\",\n      after:\n        \"linear-gradient(135deg, oklch(0.6 0.28 50) 0%, oklch(0.55 0.3 35) 50%, oklch(0.5 0.32 65) 100%)\",\n    },\n  };\n\n  const selectedScheme = colorSchemes[color];\n\n  // Glitch intensity settings\n  const intensitySettings = {\n    light: {\n      animationDuration: \"2s\",\n      translateRange: 2,\n      opacityRange: [0.8, 0.9],\n      skewRange: 0.5,\n    },\n    medium: {\n      animationDuration: \"1s\",\n      translateRange: 3,\n      opacityRange: [0.7, 0.85],\n      skewRange: 1,\n    },\n    heavy: {\n      animationDuration: \"0.5s\",\n      translateRange: 5,\n      opacityRange: [0.6, 0.8],\n      skewRange: 2,\n    },\n    extreme: {\n      animationDuration: \"0.3s\",\n      translateRange: 8,\n      opacityRange: [0.5, 0.75],\n      skewRange: 3,\n    },\n  };\n\n  const settings = intensitySettings[glitchIntensity];\n\n  const sizeMap = {\n    sm: \"text-2xl\",\n    md: \"text-4xl\",\n    lg: \"text-5xl\",\n    xl: \"text-6xl\",\n    \"2xl\": \"text-7xl\",\n    \"3xl\": \"text-8xl\",\n  };\n\n  // Animation variants for the glitch effect\n  const glitchAnimation = {\n    initial: {\n      transform: \"translate(0)\",\n      opacity: settings.opacityRange[1],\n    },\n    animate: {\n      transform: [\n        \"translate(0)\",\n        `translate(${\n          settings.translateRange\n        }px, ${-settings.translateRange}px) skew(${settings.skewRange}deg)`,\n        `translate(${-settings.translateRange}px, ${\n          settings.translateRange\n        }px) skew(${-settings.skewRange}deg)`,\n        `translate(${-settings.translateRange}px, ${-settings.translateRange}px) skew(${\n          settings.skewRange\n        }deg)`,\n        `translate(${settings.translateRange}px, ${\n          settings.translateRange\n        }px) skew(${-settings.skewRange}deg)`,\n        \"translate(0)\",\n      ],\n      opacity: [\n        settings.opacityRange[1],\n        settings.opacityRange[0],\n        settings.opacityRange[1],\n        settings.opacityRange[0],\n        settings.opacityRange[1],\n      ],\n      transition: {\n        duration: Number(settings.animationDuration.replace(\"s\", \"\")),\n        ease: [0.25, 0.46, 0.45, 0.94],\n        repeat: Number.POSITIVE_INFINITY,\n      },\n    },\n  };\n\n  return (\n    <div\n      className={cn(\n        \"relative flex items-center justify-center\",\n        \"overflow-visible p-8\",\n        className\n      )}\n      ref={containerRef}\n    >\n      <motion.div\n        animate={isStatic ? \"initial\" : \"animate\"}\n        className={cn(\n          \"relative font-bold tracking-wider\",\n          typeof size === \"string\" ? sizeMap[size] : \"\"\n        )}\n        initial=\"initial\"\n        style={{\n          fontSize: typeof size === \"number\" ? `${size}px` : undefined,\n          fontWeight,\n          letterSpacing,\n          color: selectedScheme.primary,\n          textShadow: `0 0 5px ${selectedScheme.primary}40`,\n        }}\n        variants={glitchAnimation as any}\n      >\n        {text}\n\n        <motion.div\n          animate={isStatic ? \"initial\" : \"animate\"}\n          className=\"pointer-events-none absolute inset-0\"\n          initial=\"initial\"\n          style={{\n            color: selectedScheme.before,\n            textShadow: `0 0 7px ${selectedScheme.before}40`,\n          }}\n          variants={{\n            ...(glitchAnimation as any),\n            animate: {\n              ...(glitchAnimation as any).animate,\n              transform: [\n                \"translate(0)\",\n                `translate(${-settings.translateRange}px, ${\n                  settings.translateRange\n                }px) skew(${-settings.skewRange}deg)`,\n                `translate(${\n                  settings.translateRange\n                }px, ${-settings.translateRange}px) skew(${\n                  settings.skewRange\n                }deg)`,\n                `translate(${settings.translateRange}px, ${\n                  settings.translateRange\n                }px) skew(${-settings.skewRange}deg)`,\n                `translate(${-settings.translateRange}px, ${-settings.translateRange}px) skew(${\n                  settings.skewRange\n                }deg)`,\n                \"translate(0)\",\n              ],\n            },\n          }}\n        >\n          {text}\n        </motion.div>\n\n        <motion.div\n          animate={isStatic ? \"initial\" : \"animate\"}\n          className=\"pointer-events-none absolute inset-0\"\n          initial=\"initial\"\n          style={{\n            color: selectedScheme.after,\n            textShadow: `0 0 7px ${selectedScheme.after}40`,\n          }}\n          variants={{\n            ...(glitchAnimation as any),\n            animate: {\n              ...(glitchAnimation as any).animate,\n              transform: [\n                \"translate(0)\",\n                `translate(${\n                  settings.translateRange\n                }px, ${-settings.translateRange}px) skew(${\n                  settings.skewRange\n                }deg)`,\n                `translate(${-settings.translateRange}px, ${\n                  settings.translateRange\n                }px) skew(${-settings.skewRange}deg)`,\n                `translate(${-settings.translateRange}px, ${\n                  settings.translateRange\n                }px) skew(${settings.skewRange}deg)`,\n                `translate(${\n                  settings.translateRange\n                }px, ${-settings.translateRange}px) skew(${-settings.skewRange}deg)`,\n                \"translate(0)\",\n              ],\n            },\n          }}\n        >\n          {text}\n        </motion.div>\n      </motion.div>\n    </div>\n  );\n};\n\nexport default GlitchText;\n",
      "path": "/components/kokonutui/glitch-text.tsx",
      "target": "components/kokonutui/glitch-text.tsx"
    }
  ]
}