7d:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 92:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-bg",":"]}]}] 64:["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f0f4f9"}] 65:["$","div","color-code-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#2a3444"}]]}] 66:["$","div","color-error",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-error",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#d92d4a"}]]}] 67:["$","div","color-error-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-error-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 68:["$","div","color-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#101828"}]]}] 69:["$","div","color-fg-secondary",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-fg-secondary",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#344054"}]]}] 6a:["$","div","color-focus",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-focus",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#315fea"}]]}] 6b:["$","div","color-info",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-info",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#087dbd"}]]}] 6c:["$","div","color-info-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-info-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 6d:["$","div","color-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#667085"}]]}] 6e:["$","div","color-neutral",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-neutral",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#475467"}]]}] 6f:["$","div","color-neutral-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-neutral-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 70:["$","div","color-secondary-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-secondary-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#009fb3"}]]}] 71:["$","div","color-signature",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-signature",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#e9564a"}]]}] 72:["$","div","color-success",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-success",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#128a55"}]]}] 73:["$","div","color-success-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-success-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 74:["$","div","color-surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 75:["$","div","color-surface-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-surface-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f8fafd"}]]}] 76:["$","div","color-warning",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-warning",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#b86e00"}]]}] 77:["$","div","color-warning-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-warning-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 78:["$","$L7d",null,{"orientation":"horizontal"}] 79:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L62",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4f7cff"}]]}],["$","div","color-accent-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#080c14"}]]}],["$","div","color-accent-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#6f91ff"}]]}],["$","div","color-accent-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#7f9fff"}]]}],["$","div","color-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#080c14"}]]}],["$","div","color-bg-elevated",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg-elevated",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-bg-secondary",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg-secondary",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#263449"}]]}],["$","div","color-border-strong",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#354863"}]]}],["$","div","color-code-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-code-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"$L7e"}]]}],"$L7f","$L80","$L81","$L82","$L83","$L84","$L85","$L86","$L87","$L88","$L89","$L8a","$L8b","$L8c","$L8d","$L8e","$L8f","$L90"]}],"$L91"]}]}]]}] 7a:null 7b:null 93:T4dfc,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { useReducedMotion, useVisibilityPause } from "@/lib/motiq"; /* -------------------------------------------------------------------------- */ /* Types */ /* -------------------------------------------------------------------------- */ export interface CopperplateFocalPoint { /** 0–1 horizontal position of a "light source" driving the tonal field. */ x: number; /** 0–1 vertical position of a "light source" driving the tonal field. */ y: number; } export interface CopperplateSafeArea { /** 0–1 left edge of the readable safe area. */ x: number; /** 0–1 top edge of the readable safe area. */ y: number; /** 0–1 width of the readable safe area. */ w: number; /** 0–1 height of the readable safe area. */ h: number; } export interface CopperplateHatchProps extends React.HTMLAttributes { /** Hatch-stroke density multiplier (smaller pitch = more strokes). ~0.4–1.6. */ density?: number; /** Overall ink/glint contrast of the plate (0–1.4). */ intensity?: number; /** Light-wave travel speed multiplier. 0 (or reduced motion) freezes on a rich still frame. */ speed?: number; /** * One or two "light source" points. The first drives the traveling radial light * (follows the pointer when `interactive`); the second, if given, is a static * secondary bright zone in the tonal field. */ focalPoint?: CopperplateFocalPoint | CopperplateFocalPoint[]; /** Region where the plate dims toward the ground so foreground text stays readable * (drives only the DOM frosted scrim behind `children` — the canvas quiet-zone * gradient itself is fixed to the Motion Lab values for a pixel-identical look). */ safeArea?: CopperplateSafeArea; /** Overrides the metallic glint / focal light gold. Accepts a plain `#hex` or * `rgb()`/`rgba()` string; omit to use the exact Motion Lab gold (`#eab365`). * Values that need DOM resolution (e.g. `var(...)`) are ignored — this component * is a fixed dark palette, not theme-aware. */ accent?: string; /** Deterministic seed for the hatch field layout (SSR-stable). */ seed?: number; /** Pause the loop when scrolled offscreen or the tab is hidden. */ pauseWhenHidden?: boolean; /** The focal light follows the pointer (never the sole effect). */ interactive?: boolean; /** Force the static, motion-free variant regardless of system preference. */ reducedMotion?: boolean; } /* -------------------------------------------------------------------------- */ /* Deterministic helpers */ /* -------------------------------------------------------------------------- */ const TAU = Math.PI * 2; /** Rich still frame — the light mid-sweep, strokes glinting (also the reduced-motion frame). */ const STILL_SECONDS = 7.3; /** Fixed engraver's cross-hatch directions (degrees) — never randomized, never move. */ const ANGLES = [32, -32, 90] as const; const ANGLE_RAD = ANGLES.map((a) => (a * Math.PI) / 180); /** Per-layer stroke budget so per-frame cost stays bounded on large canvases. */ const LAYER_CAP = [700, 500, 300] as const; const DEFAULT_SAFE_AREA: CopperplateSafeArea = { x: 0.04, y: 0.12, w: 0.56, h: 0.76 }; const DEFAULT_FOCAL: CopperplateFocalPoint = { x: 0.62, y: 0.42 }; /** mulberry32 — no Math.random / Date.now at render or module scope (SSR-stable). */ function makeRng(seed: number) { let a = seed >>> 0; return () => { a = (a + 0x6d2b79f5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n)); /* -------------------------------------------------------------------------- */ /* Canvas colors — FIXED Motion Lab palette. This is a deliberate committed- */ /* dark, single-visual-world design: no getComputedStyle, no --color-* reads. */ /* -------------------------------------------------------------------------- */ type RGB = [number, number, number]; const LAB_GROUND = "#0a0b10"; /** candle-gold glint / focal light — overridable via `accent`. */ const GOLD: RGB = [234, 179, 101]; // #eab365 /** slate ink baseline for non-glinting strokes — always fixed, never accent-tied. */ const INK_SLATE: RGB = [158, 163, 196]; // #9ea3c4 /** Parse a plain CSS color (hex, or `rgb()`/`rgba()`) into an RGB triplet. Anything * else (a `var(...)` reference, a named color, empty/unset) falls back to the fixed * lab hue — this component no longer reads design tokens off the DOM. */ function parseAccentColor(value: string | undefined, fallback: RGB): RGB { if (!value) return fallback; const c = value.trim(); if (c.startsWith("#")) { let h = c.slice(1); if (h.length === 3) h = h.split("").map((d) => d + d).join(""); if (h.length !== 6) return fallback; const n = parseInt(h, 16); if (Number.isNaN(n)) return fallback; return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; } const m = c.match(/^rgba?$([^)]+)$$/); if (m) { const parts = m[1].split(/[\s,/]+/).filter(Boolean).slice(0, 3).map(Number); if (parts.length === 3 && parts.every((p) => !Number.isNaN(p))) return [parts[0], parts[1], parts[2]]; } return fallback; } const rgba = (c: RGB, a: number) => `rgba(${c[0] | 0}, ${c[1] | 0}, ${c[2] | 0}, ${clamp(a, 0, 1)})`; /* -------------------------------------------------------------------------- */ /* Deterministic field — rebuilt on mount + resize (real container pixels) */ /* -------------------------------------------------------------------------- */ interface CopperStroke { x: number; y: number; li: number; base: number; th: number; } interface CopperState { strokes: CopperStroke[]; /** Half-length of each hatch stroke (derived from the density-scaled step). */ half: number; /** Current (lerped) light position. */ fx: number; fy: number; /** Target light position (pointer, or the static default). */ tx: number; ty: number; } interface FocalPx { x: number; y: number; amp: number; sigma: number; } function normalizeFocals( focalPoint: CopperplateHatchProps["focalPoint"], W: number, H: number, ): FocalPx[] { const list = Array.isArray(focalPoint) ? focalPoint : [focalPoint ?? DEFAULT_FOCAL]; return list.slice(0, 2).map((f, i) => ({ x: f.x * W, y: f.y * H, amp: 1 - i * 0.28, sigma: 230 - i * 40, })); } function buildCopperState( seed: number, density: number, focalPoint: CopperplateHatchProps["focalPoint"], W: number, H: number, ): CopperState { const rng = makeRng((seed >>> 0) * 2654435761 + 31); const step = clamp(24 / Math.max(0.4, density), 14, 40); const half = step * 0.46; const harm = [ { f: 0.006 + rng() * 0.004, a: 0.22, p: rng() * TAU }, { f: 0.009 + rng() * 0.004, a: 0.16, p: rng() * TAU }, ]; const focals = normalizeFocals(focalPoint, W, H); const secondary = focals[1]; const strokes: CopperStroke[] = []; for (let li = 0; li < 3; li++) { const th = 0.34 + li * 0.3; const cap = LAYER_CAP[li] ?? 300; let count = 0; for (let y = 0; y < H + step && count < cap; y += step) { const rowIdx = Math.round(y / step); const rowOffset = (rowIdx % 2) * step * 0.5; for (let x = rowOffset; x < W + step && count < cap; x += step) { let v = 0; for (const h of harm) v += h.a * (0.5 + 0.5 * Math.sin(x * h.f + y * h.f * 0.7 + h.p)); if (secondary) { const dx = x - secondary.x; const dy = y - secondary.y; v += secondary.amp * 0.9 * Math.exp(-(dx * dx + dy * dy) / (2 * secondary.sigma * secondary.sigma)); } strokes.push({ x, y, li, base: v, th }); count++; } } } const primary = focals[0] ?? { x: W * 0.62, y: H * 0.42, amp: 1, sigma: 230 }; return { strokes, half, fx: primary.x, fy: primary.y, tx: primary.x, ty: primary.y }; } /** * Paints the readable quiet zone — always the LAST canvas op. The Motion Lab's * pocket is a circle sized from `min(W, H)`, which stops covering the copy once * the container gets small or very wide (fixed-px text then spills past it), so * this keeps the lab's exact alpha falloff but shapes it as an ellipse anchored * to `safeArea`. Same look at lab proportions, legible copy at any size. */ function paintQuietZone( ctx: CanvasRenderingContext2D, W: number, H: number, sa: { x: number; y: number; w: number; h: number }, centerAlpha: number, midStop: number, midAlpha: number, ) { const cx = (sa.x + sa.w / 2) * W; const cy = (sa.y + sa.h / 2) * H; const rx = Math.max(sa.w * W * 1.05, W * 0.44, Math.min(W, H) * 0.5); const ry = Math.max(sa.h * H * 0.95, H * 0.52, Math.min(W, H) * 0.44); const k = ry / rx || 1; ctx.save(); ctx.translate(cx, cy); ctx.scale(1, k); const g = ctx.createRadialGradient(0, 0, 0, 0, 0, rx); g.addColorStop(0, `rgba(10,11,16,${centerAlpha})`); g.addColorStop(midStop, `rgba(10,11,16,${midAlpha})`); g.addColorStop(1, "rgba(10,11,16,0)"); ctx.fillStyle = g; ctx.fillRect(-W * 2, (-H * 2) / k, W * 4, (H * 4) / k); ctx.restore(); } /* -------------------------------------------------------------------------- */ /* Component */ /* -------------------------------------------------------------------------- */ /** * CopperplateHatch — "Engraver's Light": waves of candle-gold light radiate from a * focal point, igniting each burin stroke as they pass through a fixed three-angle * crosshatch field, with a metallic glint over slate ink and a breathing contour * halo around the light. Move the pointer (when `interactive`) and the light * follows. One `