'use client' import * as React from "react" import { useState, useEffect, useRef } from "react" import type p5 from 'p5' import P5 from 'p5' declare global { interface Window { p5: unknown; } } interface GlowProps { className?: string width?: number height?: number mode?: Mode hasControls?: boolean onModeChange?: (mode: Mode) => void } type Mode = 'Night' | 'Sunset' export function Glow({ className = "", width = 400, height = 400, mode: initialMode = 'Sunset', hasControls = false, onModeChange }: GlowProps) { const containerRef = useRef(null) const sketchRef = useRef() const [isMounted, setIsMounted] = useState(false) const [mode, setMode] = useState(initialMode) const [error, setError] = useState(null) useEffect(() => { setIsMounted(true) return () => setIsMounted(false) }, []) const handleModeChange = (newMode: Mode) => { setMode(newMode) if (onModeChange) { onModeChange(newMode) } } useEffect(() => { if (!isMounted || !containerRef.current) return const loadP5AndCreateSketch = async () => { try { if (sketchRef.current) { sketchRef.current.remove() } sketchRef.current = new P5((p: p5) => { let y: number p.setup = () => { const canvas = p.createCanvas(width, height) canvas.parent(containerRef.current!) if (mode === 'Night') { p.background(15) } else { for (let y = 0; y < p.height; y++) { const inter = p.map(y, 0, p.height, 0, 1) const c = p.lerpColor( p.color(200, 220, 255), p.color(255, 150, 50), inter ) p.stroke(c) p.line(0, y, p.width, y) } } y = p.random(250, 300) const celestialX = p.random(80, p.width - 80) const celestialY = mode === 'Night' ? p.random(40, 120) : p.random(150, 180) const celestialD = p.random(30, 35) p.push() p.translate(celestialX, celestialY) if (mode === 'Night') { for (let i = 0; i < 4000; i++) { const r = celestialD + p.random(p.random()) * 15 const theta = p.random(2 * p.PI) const x = p.cos(theta) * r const yPos = p.sin(theta) * r p.fill(255, 20) p.noStroke() p.circle(x, yPos, p.random(1.5)) } } else { p.noStroke() p.fill(255, 69, 0) p.circle(0, 0, celestialD * 2) for (let i = 0; i < 15; i++) { p.noStroke() const alpha = p.map(i, 0, 15, 100, 0) const size = p.map(i, 0, 15, celestialD * 2, celestialD * 4) p.fill(255, 100, 0, alpha) p.circle(0, 0, size) } for (let i = 0; i < 1000; i++) { const theta = p.random(p.PI * 0.8) + p.PI * 0.6 const rad = p.random(p.random()) const r = p.map(rad, 0, 1, celestialD, celestialD * 2) const x = p.cos(theta) * r const yPos = p.sin(theta) * r const alpha = p.map(rad, 0, 1, 30, 0) p.fill(255, 150, 50, alpha) p.circle(x, yPos, p.random(2)) } } p.pop() } p.draw = () => { p.blendMode(p.BLEND) for (let x = 0; x < p.width; x++) { const n1 = p.noise(x * 0.002, y * 0.008) const n3 = p.noise(x * 0.002 + 10000, y * 0.01 + 10000) const h = 8 + n1 * 120 p.noStroke() const baseColor = n1 * 255 if (mode === 'Night') { p.fill(baseColor + p.random(-2, 2)) } else { const warmth = p.map(y, 0, p.height, 0.7, 1) p.fill( baseColor * warmth + p.random(-2, 2), baseColor * 0.5 * warmth + p.random(-2, 2), baseColor * 0.3 * warmth + p.random(-2, 2) ) } p.rect(x, y, 2, -h) if (n3 > 0.5 && n3 < 0.51) { for (let j = 0; j < 60; j++) { const dotX = x + p.random(-1, 1) const dotY = y - h - (p.random(p.random()) * 140) if (mode === 'Night') { p.fill(255, 3) } else { p.fill(255, p.random(150, 200), p.random(50, 100), 2) } p.circle(dotX, dotY, p.random(1.5)) } } } y++ if (y > p.height + 200) { p.noLoop() } } }) } catch (err) { setError(`Loading failed: ${err instanceof Error ? err.message : String(err)}`) } } loadP5AndCreateSketch() return () => { if (sketchRef.current) { sketchRef.current.remove() } } }, [isMounted, mode, width, height]) return (

{error && (

{error}

)}

{hasControls && (

{(['Sunset', 'Night'] as Mode[]).map(m => ( ))}

)}

) }