"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { useReducedMotion, useVisibilityPause } from "@/lib/motiq"; /* -------------------------------------------------------------------------- */ /* Types */ /* -------------------------------------------------------------------------- */ export interface LoomDraftSafeArea { /** 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 LoomDraftProps extends React.HTMLAttributes { /** Warp/weft spacing multiplier — more threads and rows as it increases. ~0.4–1.6. */ density?: number; /** Overall glow/ink contrast of the weave (0–1.4). */ intensity?: number; /** Weaving speed multiplier. 0 (or reduced motion) freezes on a rich still frame. */ speed?: number; /** Region where the weave 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?: LoomDraftSafeArea; /** Overrides the ramp's cyan (B) stop — the mid color of the fixed violet→cyan→pink * weft ramp. Accepts a plain `#hex` or `rgb()`/`rgba()` string; omit to use the * exact Motion Lab cyan (`#35d5e5`). 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 warp/weft/dust layout (SSR-stable). */ seed?: number; /** Pause the loop when scrolled offscreen or the tab is hidden. */ pauseWhenHidden?: boolean; /** Pointer shimmer follows the cursor across the weave (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 — mid-weave, a shuttle comet in flight (also the reduced-motion frame). */ const STILL_SECONDS = 7.3; const DEFAULT_SAFE_AREA: LoomDraftSafeArea = { x: 0.04, y: 0.12, w: 0.56, h: 0.76 }; /** 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)); const smoothstep = (t: number) => { const c = clamp(t, 0, 1); return c * c * (3 - 2 * c); }; /* -------------------------------------------------------------------------- */ /* 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"; /** violet -> cyan -> pink weft ramp stops — exactly the lab's `ramp(u)` constants. */ const RAMP_VIOLET: RGB = [124, 108, 255]; // #7c6cff — ramp start (A), always fixed const RAMP_CYAN: RGB = [53, 213, 229]; // #35d5e5 — ramp mid (B), overridable via `accent` const RAMP_PINK: RGB = [255, 92, 147]; // #ff5c93 — ramp tail (C), always fixed /** Mid-stop tint baked into the warp gradient — a literal lab constant, not a re-mix. */ const WARP_MID: RGB = [140, 124, 255]; /** Sheen + shuttle highlight constants — literal lab values, not derived mixes. */ const SHEEN_A: RGB = [190, 240, 255]; const SHEEN_B: RGB = [255, 190, 230]; const COMET_TRAIL_END: RGB = [210, 245, 255]; const COMET_HEAD_WHITE: RGB = [255, 255, 255]; const COMET_HEAD_MID: RGB = [150, 235, 255]; const SPARK: RGB = [200, 245, 255]; /** 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 mixRgb = (a: RGB, b: RGB, k: number): RGB => { const kk = clamp(k, 0, 1); return [a[0] + (b[0] - a[0]) * kk, a[1] + (b[1] - a[1]) * kk, a[2] + (b[2] - a[2]) * kk]; }; const rgba = (c: RGB, a: number) => `rgba(${c[0] | 0}, ${c[1] | 0}, ${c[2] | 0}, ${clamp(a, 0, 1)})`; /* -------------------------------------------------------------------------- */ /* Deterministic geometry — rebuilt on mount + resize (real container pixels) */ /* -------------------------------------------------------------------------- */ interface LoomGeometry { warpX: number[]; sp: number; rowH: number; rows: number; rowSeed: { o: number }[]; dust: { x: number; y: number; s: number; ph: number; warm: boolean }[]; } function buildLoomGeometry(seed: number, density: number, W: number, H: number): LoomGeometry { const rng = makeRng((seed >>> 0) * 2654435761 + 17); const sp = clamp(24 / Math.max(0.4, density), 12, 40); const rowH = clamp(15 / Math.max(0.4, density), 8, 26); const warpN = Math.max(4, Math.round(W / sp)); const warpX: number[] = []; for (let i = 0; i <= warpN; i++) warpX.push(i * (W / warpN)); const rows = Math.ceil(H / rowH) + 2; const rowSeed = Array.from({ length: rows }, () => ({ o: 0.5 + rng() * 0.5 })); const dust = Array.from({ length: 34 }, () => ({ x: rng(), y: rng(), s: 0.5 + rng() * 1.3, ph: rng() * TAU, warm: rng() < 0.5, })); return { warpX, sp, rowH, rows, rowSeed, dust }; } /** * 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 */ /* -------------------------------------------------------------------------- */ /** * LoomDraft — "Living Weave": a shuttle of light races the loom, laying luminous * weft into the fabric row by row (weave → gleam → dissolve → repeat), a diagonal * iridescent sheen rolls across the finished bolt, warp threads sway, and loom dust * drifts through the field. One `