Copperplate Hatch

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 CopperplateFocalPoint {
13  /** 0–1 horizontal position of a "light source" driving the tonal field. */
14  x: number;
15  /** 0–1 vertical position of a "light source" driving the tonal field. */
16  y: number;
17}
18 
19export interface CopperplateSafeArea {
20  /** 0–1 left edge of the readable safe area. */
21  x: number;
22  /** 0–1 top edge of the readable safe area. */
23  y: number;
24  /** 0–1 width of the readable safe area. */
25  w: number;
26  /** 0–1 height of the readable safe area. */
27  h: number;
28}
29 
30export interface CopperplateHatchProps extends React.HTMLAttributes<HTMLDivElement> {
31  /** Hatch-stroke density multiplier (smaller pitch = more strokes). ~0.4–1.6. */
32  density?: number;
33  /** Overall ink/glint contrast of the plate (0–1.4). */
34  intensity?: number;
35  /** Light-wave travel speed multiplier. 0 (or reduced motion) freezes on a rich still frame. */
36  speed?: number;
37  /**
38   * One or two "light source" points. The first drives the traveling radial light
39   * (follows the pointer when `interactive`); the second, if given, is a static
40   * secondary bright zone in the tonal field.
41   */
42  focalPoint?: CopperplateFocalPoint | CopperplateFocalPoint[];
43  /** Region where the plate dims toward the ground so foreground text stays readable
44   *  (drives only the DOM frosted scrim behind `children` — the canvas quiet-zone
45   *  gradient itself is fixed to the Motion Lab values for a pixel-identical look). */
46  safeArea?: CopperplateSafeArea;
47  /** Overrides the metallic glint / focal light gold. Accepts a plain `#hex` or
48   *  `rgb()`/`rgba()` string; omit to use the exact Motion Lab gold (`#eab365`).
49   *  Values that need DOM resolution (e.g. `var(...)`) are ignored — this component
50   *  is a fixed dark palette, not theme-aware. */
51  accent?: string;
52  /** Deterministic seed for the hatch field layout (SSR-stable). */
53  seed?: number;
54  /** Pause the loop when scrolled offscreen or the tab is hidden. */
55  pauseWhenHidden?: boolean;
56  /** The focal light follows the pointer (never the sole effect). */
57  interactive?: boolean;
58// … truncated