const PARTICLES = Array.from({ length: 70 }).map((_, i) => ({
  left: (i * 17 + (i * i) % 13) % 100,
  size: 2 + (i % 4),
  delay: (i % 12) * 0.5,
  duration: 8 + (i % 7),
  color: ["#a5b4fc", "#f0abfc", "#67e8f9", "#fcd34d"][i % 4],
}));

export function ParticleRiseHero() {
  const words = ["Quietly", "build", "something", "that", "glows."];
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#04050b] text-white antialiased flex items-center px-10 lg:px-20">
      {/* aurora bottom glow */}
      <div
        aria-hidden
        className="absolute inset-x-0 bottom-0 h-3/4"
        style={{
          background:
            "radial-gradient(50% 100% at 25% 100%, rgba(99,102,241,0.5), transparent 70%), radial-gradient(50% 100% at 75% 100%, rgba(236,72,153,0.45), transparent 70%), radial-gradient(40% 80% at 50% 100%, rgba(34,211,238,0.35), transparent 70%)",
          filter: "blur(8px)",
        }}
      />
      {/* rising particles */}
      <div aria-hidden className="absolute inset-0 overflow-hidden">
        {PARTICLES.map((p, i) => (
          <span
            key={i}
            className="absolute bottom-0 rounded-full"
            style={{
              left: `${p.left}%`,
              height: p.size,
              width: p.size,
              background: p.color,
              boxShadow: `0 0 ${p.size * 6}px ${p.color}`,
              animation: `particle-rise ${p.duration}s linear ${p.delay}s infinite`,
              opacity: 0,
            }}
          />
        ))}
      </div>

      <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-10 lg:px-20 py-6">
        <span className="text-[13px] font-semibold tracking-[0.2em] uppercase text-white/80">Velynkit</span>
        <a href="#" className="rounded-full border border-white/20 px-4 py-1.5 text-[12.5px] text-white/80 hover:bg-white/10 transition-colors">Start free</a>
      </div>

      <div className="relative z-10 max-w-2xl">
        <p className="mb-6 font-mono text-[11px] uppercase tracking-[0.3em] text-white/45">
          412 indie founders shipping with us
        </p>
        <h1
          className="font-normal leading-[0.98] tracking-[-0.01em]"
          style={{ fontSize: "clamp(48px, 8vw, 110px)", fontFamily: "'Instrument Serif', Georgia, serif" }}
        >
          {words.map((w, i) => (
            <span
              key={i}
              className="mr-[0.25em] inline-block"
              style={{ animation: `word-reveal 0.9s cubic-bezier(0.22,1,0.36,1) ${0.3 + i * 0.14}s both` }}
            >
              {w}
            </span>
          ))}
        </h1>
        <p
          className="mt-7 max-w-md text-[16px] leading-relaxed text-white/55"
          style={{ animation: "word-reveal 0.9s ease 1.1s both" }}
        >
          The boilerplate-killer for indie founders — auth, billing, emails and a
          polished landing, wired together. Deploy on Friday.
        </p>
        <div className="mt-9 flex items-center gap-4" style={{ animation: "word-reveal 0.9s ease 1.3s both" }}>
          <a href="#" className="rounded-full bg-white px-6 py-3 text-[13px] font-medium text-[#04050b] transition-transform hover:scale-[1.03]">
            Get the starter — $99
          </a>
          <a href="#" className="text-[13px] text-white/60 underline-offset-4 hover:text-white hover:underline">
            See what&apos;s inside ↗
          </a>
        </div>
      </div>

      <style>{`
        @keyframes particle-rise {
          0% { transform: translateY(0); opacity: 0; }
          10% { opacity: 1; }
          90% { opacity: 0.6; }
          100% { transform: translateY(-680px); opacity: 0; }
        }
        @keyframes word-reveal {
          from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
          to { opacity: 1; transform: translateY(0); filter: blur(0); }
        }
      `}</style>
    </div>
  );
}
Aurora Reveal Hero

Quietlybuildsomethingthatglows.
