NeonLoader

1"use client";
2 
3import { useEffect, useRef } from "react";
4import type { ComponentProps, CSSProperties } from "react";
5 
6import { cn } from "@/lib/utils";
7 
8export type NeonLoaderSize = "sm" | "md" | "lg";
9 
10export interface LoaderMark {
11  /** SVG path data for the mark, in the mark's own coordinate space. */
12  path: string;
13  /** ViewBox width of the path. */
14  width: number;
15  /** ViewBox height of the path. */
16  height: number;
17}
18 
19export type NeonLoaderProps = Omit<ComponentProps<"div">, "children"> & {
20  /** Accessible status text and, by default, the visible label. */
21  label?: string;
22  /** Preset or exact pixel size of the Neon mark. */
23  size?: NeonLoaderSize | number;
24  /** Hide the visible label while retaining it for assistive technology. */
25  showLabel?: boolean;
26  /** Remove status semantics when the loader is purely decorative. */
27  decorative?: boolean;
28  /** Duration of one noise-resolve loop in milliseconds. */
29  duration?: number;
30  /** Swap the Neon mark for your own logo path. */
31  mark?: LoaderMark;
32};
33 
34/* ─────────────────────────────────────────────────────────
35 * ANIMATION STORYBOARD (one loop, canvas-rendered)
36 *
37 *   0%   pure grain, logo fully hidden
38 *  20%   grain starts collapsing into the mark
39 *  45%   mark fully resolved, grain gone
40 *  78%   mark holds solid
41 * 100%   mark dissolved back into grain; loop restarts
42 * ───────────────────────────────────────────────────────── */
43const LOADER_TIMING = {
44  /** One full noise → logo → noise loop. */
45  durationMs: 4000,
46  /** Mark begins dissolving. */
47  holdEnd: 0.78,
48  /** Mark fully resolved. */
49  holdStart: 0.45,
50  /** Grain refresh rate in frames per second. */
51  noiseFps: 20,
52  /** Grain begins collapsing into the mark. */
53  resolveStart: 0.2,
54};
55 
56const LOADER_SIZE: Record<NeonLoaderSize, number> = {
57  lg: 48,
58  md: 32,
59  sm: 24,
60};
61 
62/** Official Neon mark, from the published brand SVG (viewBox 0 0 31.3 31.6). */
63const NEON_MARK_PATH =
64  "M31.3,0v31.6l-12.2-10.6v10.6H0V0h31.3ZM3.8,27.7h11.4v-15.2l12.2,10.8V3.8H3.8s0,23.9,0,23.9Z";
65 
66const MARK_WIDTH = 31.3;
67const MARK_HEIGHT = 31.6;
68 
69/** Default mark: the official Neon logo. */
70const NEON_MARK: LoaderMark = {
71  height: MARK_HEIGHT,
72  path: NEON_MARK_PATH,
73  width: MARK_WIDTH,
74};
75 
76// … truncated