{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "ScrambledText-TS-CSS",
	"title": "ScrambledText",
	"description": "Detects cursor position and applies a distortion effect to text.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:file",
			"path": "ScrambledText.css",
			"target": "@components/ScrambledText.css",
			"content": ".text-block {\n  margin: 7vw;\n  max-width: 800px;\n  font-family: monospace;\n  font-size: clamp(14px, 4vw, 32px);\n  color: #fff;\n}\n\n.char {\n  will-change: transform;\n  display: inline-block;\n}\n"
		},
		{
			"type": "registry:component",
			"path": "ScrambledText.tsx",
			"content": "import React, { useEffect, useRef } from 'react';\nimport { gsap } from 'gsap';\nimport { SplitText } from 'gsap/SplitText';\nimport { ScrambleTextPlugin } from 'gsap/ScrambleTextPlugin';\n\nimport './ScrambledText.css';\n\ngsap.registerPlugin(SplitText, ScrambleTextPlugin);\n\nexport interface ScrambledTextProps {\n  radius?: number;\n  duration?: number;\n  speed?: number;\n  scrambleChars?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  children: React.ReactNode;\n}\n\nconst ScrambledText: React.FC<ScrambledTextProps> = ({\n  radius = 100,\n  duration = 1.2,\n  speed = 0.5,\n  scrambleChars = '.:',\n  className = '',\n  style = {},\n  children\n}) => {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const charsRef = useRef<HTMLElement[]>([]);\n\n  useEffect(() => {\n    if (!rootRef.current) return;\n\n    const split = SplitText.create(rootRef.current.querySelector('p'), {\n      type: 'chars',\n      charsClass: 'char'\n    });\n    charsRef.current = split.chars as HTMLElement[];\n\n    charsRef.current.forEach(c => {\n      gsap.set(c, {\n        display: 'inline-block',\n        attr: { 'data-content': c.innerHTML }\n      });\n    });\n\n    const handleMove = (e: PointerEvent) => {\n      charsRef.current.forEach(c => {\n        const { left, top, width, height } = c.getBoundingClientRect();\n        const dx = e.clientX - (left + width / 2);\n        const dy = e.clientY - (top + height / 2);\n        const dist = Math.hypot(dx, dy);\n\n        if (dist < radius) {\n          gsap.to(c, {\n            overwrite: true,\n            duration: duration * (1 - dist / radius),\n            scrambleText: {\n              text: (c as HTMLElement).dataset.content || '',\n              chars: scrambleChars,\n              speed\n            },\n            ease: 'none'\n          });\n        }\n      });\n    };\n\n    const el = rootRef.current;\n    el.addEventListener('pointermove', handleMove);\n\n    return () => {\n      el.removeEventListener('pointermove', handleMove);\n      split.revert();\n    };\n  }, [radius, duration, speed, scrambleChars]);\n\n  return (\n    <div ref={rootRef} className={`text-block ${className}`} style={style}>\n      <p>{children}</p>\n    </div>\n  );\n};\n\nexport default ScrambledText;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"gsap@^3.13.0"
	]
}