NeonAurora

1"use client";
2 
3/*
4 * NeonAurora: the neon.com hero as a live WebGL surface — clusters of
5 * thin vertical bars in green/teal/blue twinkling on black. A brand
6 * background for heroes, empty workspaces, and marketing moments.
7 * Static single frame under reduced motion. GLSL lives in
8 * neon-aurora-shader.ts.
9 */
10 
11import { useEffect, useRef } from "react";
12import type { ComponentProps } from "react";
13 
14import { cn } from "@/lib/utils";
15 
16import { AURORA_FRAGMENT, AURORA_VERTEX } from "./neon-aurora-shader";
17 
18export type NeonAuroraProps = Omit<ComponentProps<"canvas">, "children"> & {
19  /** Animation speed multiplier; 0 freezes the field. */
20  speed?: number;
21  /** 0-1 share of bar clusters alive at once. */
22  density?: number;
23  /** Overall brightness multiplier. */
24  intensity?: number;
25  /** 0-1 depth-of-field blur on the near layer as it approaches. */
26  blur?: number;
27  /** 0-1 ambient bloom fog hanging around the lit regions. */
28  glare?: number;
29  /** 0-1 how often the warm flare ignites; 0 disables it. */
30  flare?: number;
31  /** 0-1 how much of its column each bar fills. */
32  thickness?: number;
33  /** 0-1 how often the hot white flare ignites; 0 disables it. */
34  whiteFlare?: number;
35  /** Bar palette, mixed per bar: [deep, primary, accent]. */
36  colors?: [string, string, string];
37};
38 
39/**
40 * Seconds for a dial change to close ~63% of its gap — uniforms ease
41 * toward their targets each frame, so a dragged slider glides
42 * instead of snapping.
43 */
44const SMOOTH_TAU = 0.12;
45 
46const DEFAULT_COLORS: [string, string, string] = [
47  "#0e5f45",
48  "#00e599",
49  "#3b82f6",
50];
51 
52const parseColor = (css: string): [number, number, number] => {
53  const probe = document.createElement("canvas");
54  probe.width = 1;
55  probe.height = 1;
56  const context = probe.getContext("2d");
57 
58  if (!context) {
59    return [0, 0.9, 0.6];
60  }
61 
62  context.fillStyle = css;
63  context.fillRect(0, 0, 1, 1);
64  const [r, g, b] = context.getImageData(0, 0, 1, 1).data;
65  return [(r ?? 0) / 255, (g ?? 0) / 255, (b ?? 0) / 255];
66};
67 
68const warnDev = (message: string) => {
69  if (typeof process !== "undefined" && process.env.NODE_ENV !== "production") {
70    console.warn(message);
71  }
72};
73 
74const compile = (
75  gl: WebGLRenderingContext,
76  type: number,
77  source: string
78): WebGLShader | null => {
79  const shader = gl.createShader(type);
80 
81  if (!shader) {
82    return null;
83  }
84 
85  gl.shaderSource(shader, source);
86  gl.compileShader(shader);
87 
88  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
89// … truncated