{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "GlitchText-JS-TW",
	"title": "GlitchText",
	"description": "RGB split and distortion glitch effect with jitter effects.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "GlitchText/GlitchText.jsx",
			"content": "const GlitchText = ({ children, speed = 0.5, enableShadows = true, enableOnHover = false, className = '' }) => {\n  const inlineStyles = {\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 = 'text-white text-[clamp(2rem,10vw,8rem)] font-black relative mx-auto select-none cursor-pointer';\n\n  const pseudoClasses = !enableOnHover\n    ? 'after:content-[attr(data-text)] after:absolute after:top-0 after:left-[10px] after:text-white after:bg-[#120F17] 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-white before:bg-[#120F17] before:overflow-hidden before:[clip-path:inset(0_0_0_0)] before:[text-shadow:var(--before-shadow)] before:animate-glitch-before'\n    : \"after:content-[''] after:absolute after:top-0 after:left-[10px] after:text-white after:bg-[#120F17] 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-[#120F17] 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\n  const combinedClasses = `${baseClasses} ${pseudoClasses} ${className}`;\n\n  return (\n    <div style={inlineStyles} data-text={children} className={combinedClasses}>\n      {children}\n    </div>\n  );\n};\n\nexport default GlitchText;\n\n// tailwind.config.js\n// module.exports = {\n//   theme: {\n//     extend: {\n//       keyframes: {\n//         glitch: {\n//           \"0%\": { \"clip-path\": \"inset(20% 0 50% 0)\" },\n//           \"5%\": { \"clip-path\": \"inset(10% 0 60% 0)\" },\n//           \"10%\": { \"clip-path\": \"inset(15% 0 55% 0)\" },\n//           \"15%\": { \"clip-path\": \"inset(25% 0 35% 0)\" },\n//           \"20%\": { \"clip-path\": \"inset(30% 0 40% 0)\" },\n//           \"25%\": { \"clip-path\": \"inset(40% 0 20% 0)\" },\n//           \"30%\": { \"clip-path\": \"inset(10% 0 60% 0)\" },\n//           \"35%\": { \"clip-path\": \"inset(15% 0 55% 0)\" },\n//           \"40%\": { \"clip-path\": \"inset(25% 0 35% 0)\" },\n//           \"45%\": { \"clip-path\": \"inset(30% 0 40% 0)\" },\n//           \"50%\": { \"clip-path\": \"inset(20% 0 50% 0)\" },\n//           \"55%\": { \"clip-path\": \"inset(10% 0 60% 0)\" },\n//           \"60%\": { \"clip-path\": \"inset(15% 0 55% 0)\" },\n//           \"65%\": { \"clip-path\": \"inset(25% 0 35% 0)\" },\n//           \"70%\": { \"clip-path\": \"inset(30% 0 40% 0)\" },\n//           \"75%\": { \"clip-path\": \"inset(40% 0 20% 0)\" },\n//           \"80%\": { \"clip-path\": \"inset(20% 0 50% 0)\" },\n//           \"85%\": { \"clip-path\": \"inset(10% 0 60% 0)\" },\n//           \"90%\": { \"clip-path\": \"inset(15% 0 55% 0)\" },\n//           \"95%\": { \"clip-path\": \"inset(25% 0 35% 0)\" },\n//           \"100%\": { \"clip-path\": \"inset(30% 0 40% 0)\" },\n//         },\n//       },\n//       animation: {\n//         \"glitch-after\": \"glitch var(--after-duration) infinite linear alternate-reverse\",\n//         \"glitch-before\": \"glitch var(--before-duration) infinite linear alternate-reverse\",\n//       },\n//     },\n//   },\n//   plugins: [],\n// };\n"
		}
	],
	"registryDependencies": [],
	"dependencies": []
}