{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ink",
  "title": "Fluid Ink Morph",
  "description": "component for the Fluid Ink Morph",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "app/registry/animatedtext/components/ink-morph.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useId, useRef } from \"react\"\nimport { motion, animate } from \"framer-motion\"\n\ntype Props = {\n  text?: string\n  intensityFrom?: number \n  intensityTo?: number \n  settleMs?: number \n  colorStart?: string \n  colorEnd?: string \n}\n\nexport function InkMorphText({\n  text = \"Ink Morph\",\n  intensityFrom = 0.28,\n  intensityTo = 0.002,\n  settleMs = 2000,\n  colorStart = \"#6366f1\", \n  colorEnd = \"#10b981\", \n}: Props) {\n  const id = useId().replace(/:/g, \"_\")\n  const turbRef = useRef<SVGFETurbulenceElement | null>(null)\n  const dispRef = useRef<SVGFEDisplacementMapElement | null>(null)\n  const rafRef = useRef<number | null>(null)\n  const startRef = useRef<number | null>(null)\n\n  useEffect(() => {\n    startRef.current = null\n    const tick = (t: number) => {\n      if (!startRef.current) startRef.current = t\n      const elapsed = t - (startRef.current ?? 0)\n      const p = Math.min(1, elapsed / settleMs)\n\n      const ease = 1 - Math.pow(1 - p, 3)\n      const freq = intensityFrom + (intensityTo - intensityFrom) * ease\n      const scale = 80 * (1 - ease) \n\n      if (turbRef.current) turbRef.current.setAttribute(\"baseFrequency\", `${freq} ${freq * 0.9}`)\n      if (dispRef.current) dispRef.current.setAttribute(\"scale\", `${scale}`)\n\n\n      if (turbRef.current) turbRef.current.setAttribute(\"seed\", `${Math.floor(1000 + t * 0.02 + p * 50)}`)\n\n      if (p < 1) {\n        rafRef.current = requestAnimationFrame(tick)\n      }\n    }\n    rafRef.current = requestAnimationFrame(tick)\n    return () => {\n      if (rafRef.current) cancelAnimationFrame(rafRef.current)\n    }\n  }, [intensityFrom, intensityTo, settleMs])\n\n  useEffect(() => {\n\n    animate(colorStart, colorEnd, {\n      duration: settleMs / 1000, \n      ease: [0.2, 0.6, 0.12, 1.0], \n      onUpdate: (latest) => {\n        if (textRef.current) {\n          textRef.current.style.color = latest\n        }\n      },\n    })\n  }, [colorStart, colorEnd, settleMs])\n\n  const textRef = useRef<HTMLSpanElement | null>(null)\n\n  return (\n    <motion.div\n      className=\"relative isolate\"\n      aria-label={text}\n      role=\"img\"\n      style={{ filter: `url(#ink_${id})` }}\n      initial={{ opacity: 0, scale: 0.8 }}\n      animate={{ opacity: 1, scale: 1 }}\n      transition={{ duration: 0.6, ease: \"easeOut\" }}\n    >\n      <span\n        ref={textRef}\n        className=\"select-none whitespace-pre font-black tracking-tight text-[clamp(30px,6vw,68px)]\"\n        style={{ color: colorStart }}\n      >\n        {text}\n      </span>\n\n      <svg width=\"0\" height=\"0\" className=\"absolute\">\n        <filter id={`ink_${id}`}>\n          <feTurbulence\n            ref={turbRef}\n            type=\"fractalNoise\"\n            baseFrequency={`${intensityFrom} ${intensityFrom * 0.9}`}\n            numOctaves=\"2\"\n            stitchTiles=\"stitch\"\n            result=\"noise\"\n            seed=\"1\"\n          />\n          <feDisplacementMap\n            ref={dispRef}\n            in=\"SourceGraphic\"\n            in2=\"noise\"\n            scale=\"80\"\n            xChannelSelector=\"R\"\n            yChannelSelector=\"G\"\n          />\n\n          <feComponentTransfer>\n            <feFuncR type=\"gamma\" amplitude=\"1.05\" exponent=\"0.9\" />\n            <feFuncG type=\"gamma\" amplitude=\"1.05\" exponent=\"0.9\" />\n            <feFuncB type=\"gamma\" amplitude=\"1.05\" exponent=\"0.9\" />\n          </feComponentTransfer>\n        </filter>\n      </svg>\n\n\n      <div className=\"pointer-events-none absolute inset-0 -z-10 opacity-[0.06]\">\n        <div className=\"h-full w-full bg-[radial-gradient(60%_50%_at_50%_45%,#3f3f3f22_0%,transparent_60%)]\" />\n      </div>\n    </motion.div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/ink-morph.tsx"
    }
  ],
  "type": "registry:component"
}