Border Beam 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 BorderBeamPanelProps extends React.HTMLAttributes<HTMLDivElement> {
13  /** Panel content — semantics and layout are entirely yours. */
14  children?: React.ReactNode;
15  /** One comet, or two opposed comets 180° apart. */
16  beams?: 1 | 2;
17  /** Comet colors. The second defaults to the rare coral signature. */
18  colors?: [string, string?];
19  /** Ring thickness in px. */
20  thickness?: number;
21  /** Resting angular velocity in deg/s (~8.5s per lap at 42). */
22  idleSpeed?: number;
23  /** Hover/focus angular velocity in deg/s — the springs wind up toward it. */
24  hoverSpeed?: number;
25  /** Blurred copy of the ring behind the panel, read as cast light. */
26  glow?: boolean;
27  /** Corner radius in px. */
28  radius?: number;
29  /** Velocity spring — the SPEED is sprung, so the comets coast instead of snapping. */
30  spring?: { stiffness?: number; damping?: number };
31  /** Deterministic starting angle (SSR-stable; no Math.random). */
32  seed?: number;
33  /** Park the loop while scrolled offscreen or the tab is hidden. */
34  pauseWhenHidden?: boolean;
35  /** Force the static, motion-free lit-border state regardless of system preference. */
36  reducedMotion?: boolean;
37}
38 
39/* -------------------------------------------------------------------------- */
40/* Physics + gradient                                                         */
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 
64const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
65 
66/** Static angle under reduced motion — both comets sit on visible edges. */
67const PARKED_ANGLE = 40;
68 
69/**
70// … truncated