Websites That
Stay Alive.

import { useEffect, useRef } from "react"
import "./styles.css"

// Tune these and watch the galaxy respond immediately.
const PARTICLE_COUNT = 440
const SWIRL_SPEED = 0.55        // try 0.15 (calm) to 2.5 (frenzied)
const COLOR_CORE = "#e20074"    // hexadecimal color — inner particles
const COLOR_EDGE = "#05f2af"    // hexadecimal color — outer particles
const GLOW = 3                 // particle glow radius, in px (0 = no glow, 5+ = very bright)
const TRAIL = 0.22               // higher = shorter, crisper trails
const PARTICLE_ALPHA = 0.5       // per-particle opacity — lower avoids blown-out overlap
const SPIRAL_TWIST = 2.6         // how many times the arm angle winds from core to edge
const CORE_GLOW = 0.16           // 0 = no bright nucleus, higher = brighter (blended from COLOR_CORE, never pure white)

function hexToRgb(hex) {
  const n = parseInt(hex.slice(1), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}

function mixColor(a, b, t, alpha) {
  const mixed = a.map((c, i) => Math.round(c + (b[i] - c) * t))
  return `rgba(${mixed.join(",")}, ${alpha})`
}

// Negative particle counts would throw (invalid array length) and a
// negative glow radius would throw on createRadialGradient — clamp both so
// weird-but-valid values (including 0) render a quiet frame instead.
const safeParticleCount = Math.max(0, Math.floor(PARTICLE_COUNT) || 0)
const safeGlow = Math.max(0, GLOW || 0)

export default function App() {
  const canvasRef = useRef(null)

  useEffect(() => {
    const canvas = canvasRef.current
    const ctx = canvas.getContext("2d")
    const core = hexToRgb(COLOR_CORE)
    const edge = hexToRgb(COLOR_EDGE)
    const white = [255, 255, 255]
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches
    const dpr = Math.min(window.devicePixelRatio || 1, 2)

    let width = 0
    let height = 0

    function resize() {
      const rect = canvas.getBoundingClientRect()
      width = rect.width
      height = rect.height
      canvas.width = width * dpr
      canvas.height = height * dpr
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
    }
    resize()
    window.addEventListener("resize", resize)

    // Angle winds with radius (a log-spiral, not random scatter) so the disk
    // reads as arms from frame one. Differential speed below (inner faster
    // than outer) keeps it winding tighter as it spins — real orbital motion.
    const particles = Array.from({ length: safeParticleCount }, () => {
      const t = Math.random()
      return {
        radius: 16 + Math.pow(t, 1.6) * 260,
        angle: t * Math.PI * 2 * SPIRAL_TWIST + Math.random() * 0.5,
        speed: (0.25 + Math.random() * 0.75) * (1 - t) + 0.05,
        size: 0.6 + Math.random() * 2,
        mix: t,
        wobble: Math.random() * Math.PI * 2,
      }
    })

    let frame

    function draw() {
      const cx = width / 2
      const cy = height / 2

      ctx.fillStyle = `rgba(4, 2, 8, ${TRAIL})`
      ctx.fillRect(0, 0, width, height)

      ctx.globalCompositeOperation = "lighter"

      // A single, non-stacking nucleus glow — tinted from COLOR_CORE, never
      // pure white. Drawn once per frame so it can't blow out like stacked
      // per-particle circles can.
      if (CORE_GLOW > 0) {
        const nucleusRadius = 15 + safeGlow * 2.4
        const nucleusColor = mixColor(core, white, Math.min(CORE_GLOW, 0.6), 0.5)
        const nucleusGradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, nucleusRadius)
        nucleusGradient.addColorStop(0, nucleusColor)
        nucleusGradient.addColorStop(1, "rgba(0,0,0,0)")
        ctx.fillStyle = nucleusGradient
        ctx.beginPath()
        ctx.arc(cx, cy, nucleusRadius, 0, Math.PI * 2)
        ctx.fill()
      }

      for (const p of particles) {
        if (!reduceMotion) {
          p.angle += (SWIRL_SPEED * p.speed) / 60
          p.wobble += 0.01
        }

        const wobbleRadius = p.radius + Math.sin(p.wobble) * 6
        const x = cx + Math.cos(p.angle) * wobbleRadius
        const y = cy + Math.sin(p.angle) * wobbleRadius * 0.72 // tilt into an ellipse

        const radius = safeGlow * p.size
        const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius)
        gradient.addColorStop(0, mixColor(core, edge, p.mix, PARTICLE_ALPHA))
        gradient.addColorStop(1, "rgba(0,0,0,0)")

        ctx.fillStyle = gradient
        ctx.beginPath()
        ctx.arc(x, y, radius, 0, Math.PI * 2)
        ctx.fill()
      }
      ctx.globalCompositeOperation = "source-over"

      if (!reduceMotion) {
        frame = requestAnimationFrame(draw)
      }
    }
    draw()

    return () => {
      cancelAnimationFrame(frame)
      window.removeEventListener("resize", resize)
    }
  }, [])

  return (
    <div className="stage">
      <canvas ref={canvasRef} />
    </div>
  )
}