export function LiquidBlobHero() {
  // metaballs orbit the center and merge gooily via the SVG goo filter
  const balls = [
    { r: 46, dist: 0, dur: 0, delay: 0 },
    { r: 30, dist: 78, dur: 7, delay: 0 },
    { r: 24, dist: 96, dur: 9, delay: -2 },
    { r: 34, dist: 66, dur: 11, delay: -4 },
    { r: 20, dist: 104, dur: 8, delay: -6 },
  ];

  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#fbf7f4] text-[#16121a] antialiased flex items-center px-10 lg:px-16">
      <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-10 lg:px-16 py-6">
        <span className="text-[14px] font-semibold tracking-tight">Velynkit AI</span>
        <a href="#" className="rounded-full bg-[#16121a] px-4 py-1.5 text-[12.5px] font-medium text-white">Open playground</a>
      </div>

      <div className="relative z-10 grid w-full max-w-6xl grid-cols-1 items-center gap-12 lg:grid-cols-2">
        {/* copy — unchanged */}
        <div>
          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-black/10 bg-white px-3 py-1 text-[12px] text-black/55">
            <span className="h-1.5 w-1.5 rounded-full bg-fuchsia-500" /> Velynkit AI · v1
          </div>
          <h1 className="text-[clamp(40px,5.4vw,82px)] font-semibold leading-[0.96] tracking-[-0.035em]">
            Generative UI
            <br />
            <span className="bg-linear-to-r from-fuchsia-500 to-indigo-500 bg-clip-text text-transparent">that ships itself.</span>
          </h1>
          <p className="mt-6 max-w-md text-[15.5px] leading-relaxed text-black/55">
            Describe the screen — get a typed, accessible React component you
            can actually merge. Trained on production design systems.
          </p>
          <div className="mt-8 flex items-center gap-3">
            <a href="#" className="rounded-full bg-[#16121a] px-5 py-2.5 text-[13px] font-medium text-white transition-transform hover:-translate-y-0.5">Open the playground →</a>
            <a href="#" className="text-[13px] text-black/55 underline-offset-4 hover:text-black hover:underline">Join waitlist</a>
          </div>
        </div>

        {/* gooey metaball cluster */}
        <div className="relative hidden justify-center lg:flex">
          <svg viewBox="0 0 460 460" className="w-full max-w-md">
            <defs>
              <linearGradient id="goo-grad" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="#f0abfc" />
                <stop offset="50%" stopColor="#c4b5fd" />
                <stop offset="100%" stopColor="#a5b4fc" />
              </linearGradient>
              <filter id="goo">
                <feGaussianBlur in="SourceGraphic" stdDeviation="11" result="blur" />
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 24 -11" result="goo" />
                <feBlend in="SourceGraphic" in2="goo" />
              </filter>
            </defs>

            <g filter="url(#goo)">
              {balls.map((b, i) => (
                <g key={i} style={{ transformOrigin: "230px 230px", animation: b.dur ? `goo-orbit ${b.dur}s linear ${b.delay}s infinite` : undefined }}>
                  <circle cx={230 + b.dist} cy={230} r={b.r} fill="url(#goo-grad)" />
                </g>
              ))}
            </g>

            {/* sparkle mark on top, gently pulsing */}
            <g fill="#fff" style={{ transformOrigin: "230px 222px", animation: "goo-spark 3.4s ease-in-out infinite" }}>
              <path d="M230 196 l11 28 l28 11 l-28 11 l-11 28 l-11 -28 l-28 -11 l28 -11 z" />
            </g>
          </svg>
        </div>
      </div>

      <style>{`
        @keyframes goo-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes goo-spark { 0%,100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.18); opacity: 1; } }
      `}</style>
    </div>
  );
}
Gooey Blob Hero

Generative UIthat ships itself.

Generative UI
that ships itself.
