{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "ScrambledText-JS-TW",
	"title": "ScrambledText",
	"description": "Detects cursor position and applies a distortion effect to text.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "ScrambledText/ScrambledText.jsx",
			"content": "import { useEffect, useRef } from 'react';\nimport { gsap } from 'gsap';\nimport { SplitText } from 'gsap/SplitText';\nimport { ScrambleTextPlugin } from 'gsap/ScrambleTextPlugin';\n\ngsap.registerPlugin(SplitText, ScrambleTextPlugin);\n\nconst ScrambledText = ({\n  radius = 100,\n  duration = 1.2,\n  speed = 0.5,\n  scrambleChars = '.:',\n  className = '',\n  style = {},\n  children\n}) => {\n  const rootRef = useRef(null);\n\n  useEffect(() => {\n    if (!rootRef.current) return;\n\n    const split = SplitText.create(rootRef.current.querySelector('p'), {\n      type: 'chars',\n      charsClass: 'inline-block will-change-transform'\n    });\n\n    split.chars.forEach(el => {\n      const c = el;\n      gsap.set(c, { attr: { 'data-content': c.innerHTML } });\n    });\n\n    const handleMove = e => {\n      split.chars.forEach(el => {\n        const c = el;\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.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\n      ref={rootRef}\n      className={`m-[7vw] max-w-[800px] font-mono text-[clamp(14px,4vw,32px)] text-white ${className}`}\n      style={style}\n    >\n      <p>{children}</p>\n    </div>\n  );\n};\n\nexport default ScrambledText;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": [
		"gsap@^3.13.0"
	]
}