{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scramble-text",
  "title": "Scramble Text",
  "description": "Decoding text effect with GSAP ScrambleText.",
  "dependencies": [
    "gsap"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/scramble-text.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ScrambleTextPlugin } from \"gsap/ScrambleTextPlugin\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\n\nimport { gsap, motionScale, useGSAP } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\n\nif (typeof window !== \"undefined\") gsap.registerPlugin(ScrambleTextPlugin, ScrollTrigger);\n\ntype ScrambleTextProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  /** The final text (rendered as-is on the server, so it is indexed and readable without JS). */\n  text: string;\n  /** When to scramble: on mount, when scrolled into view, or every time it is hovered or focused. */\n  trigger?: \"mount\" | \"inView\" | \"hover\";\n  /** Characters to scramble through. */\n  chars?: string;\n  duration?: number;\n};\n\n/** Decodes text like a terminal resolving a signal (GSAP ScrambleTextPlugin). Mono, tabular, width-stable. */\nfunction ScrambleText({ text, trigger = \"inView\", chars = \"upperCase\", duration = 0.9, className, onPointerEnter, onFocus, ...props }: ScrambleTextProps) {\n  const ref = React.useRef<HTMLSpanElement>(null);\n\n  const run = React.useCallback(() => {\n    const el = ref.current;\n    if (!el || !motionScale(el) || gsap.isTweening(el)) return;\n    gsap.to(el, { duration, ease: \"none\", scrambleText: { text, chars, speed: 0.6, revealDelay: duration * 0.25, tweenLength: false } });\n  }, [text, chars, duration]);\n\n  useGSAP(\n    () => {\n      const el = ref.current;\n      if (!el || trigger === \"hover\") return;\n      if (trigger === \"mount\") run();\n      else ScrollTrigger.create({ trigger: el, start: \"top 90%\", once: true, onEnter: run });\n    },\n    { scope: ref, dependencies: [trigger, run] },\n  );\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"scramble-text\"\n      className={cn(\"font-mono tabular-nums\", className)}\n      onPointerEnter={(e) => {\n        onPointerEnter?.(e);\n        if (trigger === \"hover\") run();\n      }}\n      onFocus={(e) => {\n        onFocus?.(e);\n        if (trigger === \"hover\") run();\n      }}\n      {...props}\n    >\n      {text}\n    </span>\n  );\n}\n\nexport { ScrambleText };\nexport type { ScrambleTextProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/scramble-text",
  "categories": [
    "motion"
  ],
  "type": "registry:ui"
}