Nebula

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5 
6interface NebulaProps extends React.HTMLAttributes<HTMLDivElement> {
7  /** Primary nebula color */
8  colorA?: string
9  /** Secondary nebula color */
10  colorB?: string
11  /** Tertiary accent color */
12  colorC?: string
13  /** Show grain/star dust overlay */
14  grain?: boolean
15  /** Animation speed multiplier (1 = default) */
16  speed?: number
17  /** Number of nebula blobs */
18  blobCount?: number
19  /** Visual mode - "dark" for space theme, "light" for bright/pastel */
20  mode?: "dark" | "light"
21}
22 
23function hexToRgba(hex: string, alpha: number): string {
24  const r = parseInt(hex.slice(1, 3), 16)
25  const g = parseInt(hex.slice(3, 5), 16)
26  const b = parseInt(hex.slice(5, 7), 16)
27  return `rgba(${r},${g},${b},${alpha})`
28}
29 
30const Nebula = React.forwardRef<HTMLDivElement, NebulaProps>(
31  (
32    {
33      colorA = "#6b1d9e",
34      colorB = "#0d3b7a",
35      colorC = "#c2185b",
36      grain = true,
37      speed = 1,
38      blobCount = 18,
39      mode = "dark",
40      className,
41      children,
42      ...props
43    },
44    ref
45  ) => {
46    const isDark = mode === "dark"
47    const bgColor = isDark ? "#080012" : "#f4f0f8"
48    const canvasRef = React.useRef<HTMLCanvasElement>(null)
49    const containerRef = React.useRef<HTMLDivElement>(null)
50    const uniqueId = React.useId()
51    const filterId = `nebula-grain-${uniqueId}`
52 
53    React.useImperativeHandle(ref, () => containerRef.current!)
54 
55    React.useEffect(() => {
56      const canvas = canvasRef.current
57      const container = containerRef.current
58      if (!canvas || !container) return
59 
60      const ctx = canvas.getContext("2d")
61      if (!ctx) return
62 
63      let w = 0
64      let h = 0
65      let rafId = 0
66 
67      const colors = [colorA, colorB, colorC]
68 
69      interface Blob {
70        x: number
71        y: number
72        r: number
73        color: string
74        phaseX: number
75        phaseY: number
76        freqX: number
77        freqY: number
78        ampX: number
79        ampY: number
80        rotPhase: number
81        rotSpeed: number
82      }
83 
84      let blobs: Blob[] = []
85 
86      function initBlobs() {
87        blobs = Array.from({ length: blobCount }, (_, i) => {
88          const color = colors[i % colors.length]
89          return {
90            x: Math.random() * w,
91            y: Math.random() * h,
92            r: Math.max(w, h) * (0.15 + Math.random() * 0.25),
93            color,
94            phaseX: Math.random() * Math.PI * 2,
95// … truncated