Aurora Panel

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import { useReducedMotion, useVisibilityPause } from "@/lib/motiq";
7 
8/* -------------------------------------------------------------------------- */
9/* Types                                                                      */
10/* -------------------------------------------------------------------------- */
11 
12export interface AuroraPanelProps extends React.HTMLAttributes<HTMLDivElement> {
13  /** Card body below the aurora roof. */
14  children?: React.ReactNode;
15  /** Roof height in px. */
16  roofHeight?: number;
17  /** Number of ribbons (clamped 2–5). */
18  ribbons?: number;
19  /** Ribbon colors, front to back. Defaults to the theme's cyan/azure pair. */
20  colors?: string[];
21  /** Ribbon opacity multiplier (0–1.6). */
22  intensity?: number;
23  /** Time multiplier for the ribbon drift. */
24  speed?: number;
25  /** Aurora leans toward the pointer over the roof. */
26  lean?: boolean;
27  /** Grain overlay opacity (0–1). */
28  grain?: number;
29  /** Badge slot pinned to the roof. */
30  overlay?: React.ReactNode;
31  /** Deterministic seed for grain + stars (SSR-stable). */
32  seed?: number;
33  /** Park the loop while scrolled offscreen or the tab is hidden. */
34  pauseWhenHidden?: boolean;
35  /** Force the static, motion-free sky regardless of system preference. */
36  reducedMotion?: boolean;
37}
38 
39/* -------------------------------------------------------------------------- */
40/* Physics + palette                                                          */
41/* -------------------------------------------------------------------------- */
42 
43/** Hand-rolled delta-time spring — keeps the component dependency-free. */
44class Spring {
45  x: number;
46  v = 0;
47  target: number;
48  k: number;
49  d: number;
50  constructor(value: number, k: number, d: number) {
51    this.x = value;
52    this.target = value;
53    this.k = k;
54    this.d = d;
55  }
56  step(dt: number): number {
57    const a = this.k * (this.target - this.x) - this.d * this.v;
58    this.v += a * dt;
59    this.x += this.v * dt;
60    return this.x;
61  }
62}
63 
64/** mulberry32 — no Math.random at render or module scope (SSR-stable). */
65function makeRng(seed: number) {
66  let a = seed >>> 0;
67  return () => {
68    a = (a + 0x6d2b79f5) | 0;
69    let t = Math.imul(a ^ (a >>> 15), 1 | a);
70    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
71    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
72  };
73}
74 
75// … truncated