4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T53d4,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // FlyingSplice — a logo ribbon whose subject is the roll stand feeding it, not // the ribbon of marks itself. ONE stand, one roll, unwinding at constant web // speed: the roll's radius falls and its RPM climbs continuously as it empties // (v/r rises as r shrinks), then the radius rebuilds on the exact time-reverse // of the same schedule while the roll keeps turning the same way. That inverse // radius/RPM relationship is the whole mechanic; the ribbon of marks is the // OUTPUT the roll feeds and is deliberately the plainer half of this component. // // The cycle wraps by oscillating the radius, not by resetting it: 15s of // run-down (R_max -> R_min, omega v/R_max -> v/R_min) then 7s of rebuild // (R_min -> R_max) — so there is never a pop back to a full roll, and never a // second disc on screen. Angular velocity is omega = v/r throughout, so it is // continuous at BOTH turning points (both sides evaluate to v/R_min and // v/R_max respectively); only dr/dt changes sign, and the rebuild is simply // the same inverse relationship traversed backward. // // Every visual quantity is a pure, closed-form function of absolute time — // never a per-frame accumulator — because prefers-reduced-motion has to render // exactly t = STATIC_TIME byte-stably without simulating up to it at mount, // and because the integrals involved have exact closed forms: // down: r = sqrt(R_max^2 - B_dn*p), theta = 2*v*(R_max - r)/B_dn // up: r = sqrt(R_min^2 + B_up*q), theta = 2*v*(r - R_min)/B_up // The swept angle accumulates across cycles as `cycle*THETA_CYCLE + theta(p)` // rather than restarting each cycle, so the index lines do not snap at the // wrap — with a single persistent roll there is no role swap to hide a reset // behind. // --------------------------------------------------------------------------- export interface FlyingSpliceProps { /** Freezes the mechanism on the composed reduced-motion still frame. */ paused?: boolean; className?: string; style?: React.CSSProperties; } type RGB = [number, number, number]; function parseHex(raw: string): RGB | null { const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(raw.trim()); if (!m) return null; let h = m[1]; if (h.length === 3) h = h.split("").map((c) => c + c).join(""); const n = parseInt(h, 16); return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]; } function mixRGB(a: RGB, b: RGB, t: number): RGB { return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t]; } function luminance([r, g, b]: RGB): number { return 0.2126 * r + 0.7152 * g + 0.0722 * b; } function rgbCss([r, g, b]: RGB, a = 1): string { return `rgba(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(b * 255)},${a})`; } // Neutral achromatic mixing points only — never a sourced or fallback colour, // just the poles used to lighten/darken a token-derived value (same pattern // weld-pool uses for its ramp). const BLACK: RGB = [0, 0, 0]; const WHITE: RGB = [1, 1, 1]; // mulberry32 — deterministic seeded PRNG so the mark pattern is identical on // every mount/render, which prefers-reduced-motion's byte-stability needs. function mulberry32(seed: number) { let a = seed >>> 0; return () => { a |= 0; 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; }; } // --- cycle timing (seconds), all named so a reviewer can check them against // the spec directly ------------------------------------------------------ const CYCLE = 22.0; // unbounded, never terminating // The roll empties over RUNDOWN_DUR and rebuilds over the remainder. Asymmetric // on purpose: the run-down is the subject and gets the long, slow read; the // rebuild is the wrap, and a shorter rebuild keeps it from reading as a second, // competing event. Both legs share the same sqrt-of-time radius law, so the // rebuild is the run-down time-reversed rather than an arbitrary eased return. const RUNDOWN_DUR = 15.0; const REBUILD_DUR = CYCLE - RUNDOWN_DUR; // 7.0 // Reduced-motion freeze: 65% through the run-down, where the roll is visibly // part-spent — a clear gap between its wrap edge and the dashed capacity ring, // index lines already noticeably closer-spaced than on a full roll. Freezing on // a full roll (the old 22.09s, chosen for a splice that no longer exists) would // show zero run-down at all. export const STATIC_TIME = RUNDOWN_DUR * 0.65; // 9.75s export function FlyingSplice({ paused = false, className = "", style }: FlyingSpliceProps) { const wrapRef = useRef(null); const canvasRef = useRef(null); const pausedRef = useRef(paused); pausedRef.current = paused; useEffect(() => { const wrap = wrapRef.current; const canvas = canvasRef.current; if (!wrap || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; let disposed = false; let raf = 0; let running = false; let staticMode = false; let cssW = 0; let cssH = 0; let dpr = 1; let simTime = 0; let lastMs = performance.now(); // ---- tokens: read before anything paints ---------------------------- let bg: RGB = [1, 1, 1]; let fg: RGB = [0.09, 0.09, 0.09]; let border: RGB = [0.92, 0.92, 0.92]; let dark = false; let colorsReady = false; const readColors = () => { const cs = getComputedStyle(document.documentElement); bg = parseHex(cs.getPropertyValue("--background")) ?? bg; fg = parseHex(cs.getPropertyValue("--foreground")) ?? fg; border = parseHex(cs.getPropertyValue("--border")) ?? border; dark = luminance(bg) < 0.5; colorsReady = true; }; readColors(); // first statement in the effect — no paint precedes this // Paper has to READ as paper against the band: at 0.16 in dark theme the // rolls were near-black discs on a near-black band and the whole // mechanism was invisible, however correct its motion was. const paperColor = () => mixRGB(bg, fg, dark ? 0.34 : 0.13); const markColor = () => rgbCss(fg, 0.78); // --- seeded mark generator: 3 abstract families (concentric arcs, bar // clusters, a lattice), each deterministic per pattern slot ----------- const rand = mulberry32(0x9e3779b9); const markSeeds = Array.from({ length: 16 }, () => ({ kind: Math.floor(rand() * 3), a: rand(), b: rand(), c: rand(), })); const drawMark = ( c: CanvasRenderingContext2D, cx: number, cy: number, size: number, seed: { kind: number; a: number; b: number; c: number } ) => { c.save(); c.translate(cx, cy); c.strokeStyle = markColor(); c.fillStyle = markColor(); c.lineWidth = Math.max(1, size * 0.06); const r = size / 2; if (seed.kind === 0) { // concentric arcs const n = 3; for (let i = 0; i < n; i++) { const rr = r * (0.35 + (i / (n - 1)) * 0.65); c.beginPath(); c.arc(0, 0, rr, seed.a * Math.PI * 2, seed.a * Math.PI * 2 + Math.PI * (0.9 + seed.b * 0.6)); c.stroke(); } } else if (seed.kind === 1) { // bar cluster const n = 4; for (let i = 0; i < n; i++) { const h = r * (0.4 + ((seed.a + i * 0.27 + seed.b) % 1) * 1.2); const x = -r + (i / (n - 1)) * r * 2; c.fillRect(x - size * 0.05, r - h, size * 0.1, h); } } else { // lattice const n = 3; c.beginPath(); for (let i = 0; i <= n; i++) { const x = -r + (i / n) * r * 2; c.moveTo(x, -r); c.lineTo(x, r); } for (let i = 0; i <= n; i++) { const y = -r + (i / n) * r * 2; c.moveTo(-r, y); c.lineTo(r, y); } c.stroke(); } c.restore(); }; // ---- geometry --------------------------------------------------------- let M = 1; let W = 1; let H = 1; let RMAX = 1; let RMIN = 1; const RMIN_RATIO = 27.5 / 64.6; // preserves the spec's radius ratio let cy = 0; let standX = 0; // the stand's centre x let nipX = 0; let markCount = 9; let indexLines = 4; const computeGeometry = () => { M = Math.min(cssW, cssH); W = cssW; H = cssH; // R_max = 0.19*M is the spec's checkable number at typical aspect // ratios; the max() with a fraction of W is a floor that engages on wide // bands (card crops especially), where 0.19*M would leave a spent roll // too small to read as wound paper. The floor is 0.11*W: with ONE stand // the cluster is a single 2*R_max-wide disc, so 0.11*W puts it at 22% of // the band — still clear of the 30%-of-band-width kill criterion that // the old 0.075*W floor was sized for when two stands shared the space. RMAX = Math.max(0.19 * M, 0.11 * W); RMIN = RMAX * RMIN_RATIO; cy = H / 2; const marginR = RMAX * 0.2; standX = W - marginR - RMAX; nipX = standX - RMAX * 1.05; markCount = M < 200 ? 6 : 9; indexLines = M < 200 ? 3 : 4; }; // ---- pure functions of absolute time --------------------------------- const v = () => 0.42 * W; // web speed, px/s const spacing = () => 0.155 * W; const markSize = () => 0.14 * M; // radius law constants: r^2 is linear in time on both legs, which is what // constant web speed off a wound roll actually gives you. const BDN = () => (RMAX * RMAX - RMIN * RMIN) / RUNDOWN_DUR; const BUP = () => (RMAX * RMAX - RMIN * RMIN) / REBUILD_DUR; const radiusAt = (phase: number) => { if (phase <= RUNDOWN_DUR) { return Math.sqrt(Math.max(RMAX * RMAX - BDN() * phase, RMIN * RMIN)); } const q = Math.min(phase - RUNDOWN_DUR, REBUILD_DUR); return Math.sqrt(Math.min(RMIN * RMIN + BUP() * q, RMAX * RMAX)); }; // exact integral of omega = v/r on each leg; omega itself is continuous at // both turning points (v/RMIN at the bottom, v/RMAX at the wrap), so the // index lines never stall, reverse or jump. const angleDownTotal = () => (2 * v() * (RMAX - RMIN)) / BDN(); const angleUpTotal = () => (2 * v() * (RMAX - RMIN)) / BUP(); const angleAt = (phase: number) => { if (phase <= RUNDOWN_DUR) { return (2 * v() * (RMAX - radiusAt(phase))) / BDN(); } return angleDownTotal() + (2 * v() * (radiusAt(phase) - RMIN)) / BUP(); }; const cycleAngle = () => angleDownTotal() + angleUpTotal(); interface RollState { radius: number; angle: number; } // The single roll's complete state at absolute time t. The swept angle // accumulates across cycles rather than restarting, so nothing snaps at the // wrap; it is reduced mod 2*PI only at draw time to keep float precision // bounded over long sessions. const rollState = (t: number): RollState => { const cycle = Math.floor(t / CYCLE); const phase = t - cycle * CYCLE; return { radius: radiusAt(phase), angle: (cycle * cycleAngle() + angleAt(phase)) % (Math.PI * 2), }; }; // ---- draw -------------------------------------------------------------- const drawRoll = ( c: CanvasRenderingContext2D, x: number, state: RollState ) => { const py = cy; c.save(); const base = paperColor(); const hi = mixRGB(base, WHITE, 0.10); const lo = mixRGB(base, BLACK, 0.12); // single-lamp Lambert shade: a radial gradient whose centre is offset // toward the light azimuth (118deg), i.e. the classic sphere-shading // trick, cheap in 2D canvas and value-only (no hue). const az = (118 * Math.PI) / 180; // a shallow offset: at 0.55 the shading read as a billiard ball rather // than as the flat end of a wound coil. const gx = x + Math.cos(az) * state.radius * 0.22; const gy = py + Math.sin(az) * state.radius * 0.22; const grad = c.createRadialGradient(gx, gy, state.radius * 0.05, x, py, state.radius * 1.05); grad.addColorStop(0, rgbCss(hi)); grad.addColorStop(0.55, rgbCss(base)); grad.addColorStop(1, rgbCss(lo)); c.beginPath(); c.arc(x, py, state.radius, 0, Math.PI * 2); c.fillStyle = grad; c.fill(); // wrap edge = the outer boundary itself; it recedes toward the core as // radius falls, which is the entire "aliveness" of the shot. c.lineWidth = Math.max(1, state.radius * 0.02); c.strokeStyle = rgbCss(lo, 0.9); c.stroke(); // fine paper-layer banding: sparse concentric rings, not the spec's // literal micro-period (impractical to render distinctly at this // scale and cost), tuned for a visible "wound paper" read instead. const rings = Math.min(14, Math.max(4, Math.round(state.radius / 8))); c.lineWidth = 1; for (let i = 1; i < rings; i++) { const rr = (state.radius * i) / rings; c.beginPath(); c.arc(x, py, rr, 0, Math.PI * 2); c.strokeStyle = rgbCss(i % 2 === 0 ? hi : lo, 0.3); c.stroke(); } // core: a roll of paper has a visible hub, and the hub is what tells // you the wrap edge is receding toward it as the roll runs down. c.beginPath(); c.arc(x, py, Math.max(3, state.radius * 0.17), 0, Math.PI * 2); c.fillStyle = rgbCss(bg, 0.92); c.fill(); c.lineWidth = 1; c.strokeStyle = rgbCss(fg, 0.45); c.stroke(); // radial index lines — what makes rotation and RPM legible. c.strokeStyle = rgbCss(fg, dark ? 0.55 : 0.4); c.lineWidth = Math.max(1, state.radius * 0.035); for (let i = 0; i < indexLines; i++) { const a = state.angle + (i / indexLines) * Math.PI * 2; c.beginPath(); c.moveTo(x, py); c.lineTo(x + Math.cos(a) * state.radius * 0.92, py + Math.sin(a) * state.radius * 0.92); c.stroke(); } c.restore(); }; const draw = () => { if (!colorsReady || cssW <= 0 || cssH <= 0) return; const t = staticMode ? STATIC_TIME : simTime; const state = rollState(t); ctx.save(); ctx.scale(dpr, dpr); ctx.clearRect(0, 0, cssW, cssH); // band separator hairlines — the only legitimate use of --border here. ctx.strokeStyle = rgbCss(border); ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, 0.5); ctx.lineTo(cssW, 0.5); ctx.moveTo(0, cssH - 0.5); ctx.lineTo(cssW, cssH - 0.5); ctx.stroke(); // The web itself. Without a visible strip of paper leaving the roll // there is no ribbon, only marks floating on the band — which is // exactly how the first cut read. The web leaves the roll at its wrap // edge, so it must end just inside the CURRENT radius: anchored to the // stand centre it would jut out past a run-down roll as a bare // rectangle, and the strip visibly lengthening as the roll empties is // itself part of the run-down read. const webEnd = standX - state.radius * 0.35; const webH = markSize() * 1.95; const paper = paperColor(); ctx.fillStyle = rgbCss(paper); ctx.fillRect(0, cy - webH / 2, webEnd, webH); ctx.strokeStyle = rgbCss(mixRGB(paper, BLACK, 0.35), 0.8); ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, cy - webH / 2 + 0.5); ctx.lineTo(webEnd, cy - webH / 2 + 0.5); ctx.moveTo(0, cy + webH / 2 - 0.5); ctx.lineTo(webEnd, cy + webH / 2 - 0.5); ctx.stroke(); // ribbon of marks, spawned at the nip and scrolling left at v(t). const spc = spacing(); const ms = markSize(); const speed = v(); const firstX = nipX - ((speed * t) % spc); let step = 0; for (let x = firstX; x > -ms; x -= spc) { step += 1; const slot = ((Math.round((nipX - x) / spc) % markCount) + markCount) % markCount; const seed = markSeeds[slot % markSeeds.length]; drawMark(ctx, x, cy, ms, seed); if (step > 200) break; // pathological-width safety, never hit in practice } // the stand hardware, then the roll sitting on it. const footY = cy + RMAX * 1.18; ctx.save(); ctx.strokeStyle = rgbCss(fg, 0.38); ctx.lineWidth = Math.max(2, RMAX * 0.06); ctx.beginPath(); ctx.moveTo(standX, cy); ctx.lineTo(standX, footY); ctx.stroke(); ctx.lineWidth = Math.max(1, RMAX * 0.045); ctx.beginPath(); ctx.moveTo(standX - RMAX * 0.42, footY); ctx.lineTo(standX + RMAX * 0.42, footY); ctx.stroke(); ctx.restore(); // The stand's capacity ring: a full roll fills it, and the gap between // it and the roll's wrap edge IS the run-down, readable in a single // still instead of only across the cycle. Its alpha is tied to that gap, // so it fades out entirely as the roll fills: at R_max the dashed ring // sits directly on the roll's own wrap-edge stroke and the doubled // outline reads as a jagged artefact — for the ~2s centred exactly on // the wrap, which is the one moment that has to be unobtrusive. ctx.save(); ctx.globalAlpha = 0.5 * ((RMAX - state.radius) / (RMAX - RMIN)); ctx.setLineDash([3, 5]); ctx.lineWidth = 1; ctx.strokeStyle = rgbCss(fg, 0.55); ctx.beginPath(); ctx.arc(standX, cy, RMAX, 0, Math.PI * 2); ctx.stroke(); ctx.restore(); drawRoll(ctx, standX, state); ctx.restore(); }; const loop = (nowMs: number) => { const dt = Math.min(0.05, Math.max(0, (nowMs - lastMs) / 1000)); lastMs = nowMs; simTime += dt; draw(); raf = requestAnimationFrame(loop); }; const wake = () => { if (running || disposed) return; running = true; lastMs = performance.now(); raf = requestAnimationFrame(loop); }; const sleep = () => { cancelAnimationFrame(raf); running = false; }; const applyBacking = () => { if (cssW < 2 || cssH < 2) return; dpr = Math.min(window.devicePixelRatio || 1, 2); const pw = Math.round(cssW * dpr); const ph = Math.round(cssH * dpr); if (canvas.width !== pw || canvas.height !== ph) { canvas.width = pw; canvas.height = ph; } canvas.style.width = `${cssW}px`; canvas.style.height = `${cssH}px`; draw(); }; const resize = () => { const rect = wrap.getBoundingClientRect(); if (rect.width < 2 || rect.height < 2) return; cssW = rect.width; cssH = rect.height; computeGeometry(); applyBacking(); draw(); }; const ro = new ResizeObserver(resize); ro.observe(wrap); resize(); // ResizeObserver's initial fire path also lands after readColors() above const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); let reduced = mq.matches; const applyMode = () => { if (reduced || pausedRef.current) { staticMode = true; sleep(); draw(); } else { staticMode = false; wake(); } }; const onMq = () => { reduced = mq.matches; applyMode(); }; mq.addEventListener("change", onMq); let onScreen = true; const io = new IntersectionObserver( (entries) => { onScreen = entries.some((en) => en.isIntersecting); if (!onScreen) sleep(); else if (!staticMode && !document.hidden) wake(); // resume path — colors already read at mount }, { threshold: 0 } ); io.observe(wrap); const onVis = () => { if (document.hidden) sleep(); else if (!staticMode && onScreen) wake(); }; document.addEventListener("visibilitychange", onVis); const themeObserver = new MutationObserver(() => { readColors(); draw(); }); themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); let lastPolledPaused = pausedRef.current; let poll = 0; const tick = () => { if (pausedRef.current !== lastPolledPaused) { lastPolledPaused = pausedRef.current; applyMode(); } poll = window.setTimeout(tick, 140); }; tick(); applyMode(); return () => { disposed = true; ro.disconnect(); io.disconnect(); mq.removeEventListener("change", onMq); document.removeEventListener("visibilitychange", onVis); themeObserver.disconnect(); window.clearTimeout(poll); sleep(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (

); } FlyingSplice.displayName = "FlyingSplice"; 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4c",null,{"files":[{"path":"registry/core/flying-splice/component.tsx","content":"$4d","type":"registry:ui","target":"components/ui/flying-splice.tsx"}],"className":"h-[70svh] min-h-80"}]]}]