64: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"] 65:T377d,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // KnotCapsizeCycle — an ambient status gauge that expresses load as knot // topology instead of a fill bar or needle. A binding knot (drawn as a fixed // set of parametric bezier strands: two standing ends, two crossing loops) // is breathed through a real rigging load cycle — ramp, hold, release — and // at peak load its asymmetric crossings visibly slide and roll into a // capsized topology before the next release lets it re-dress. This is the // granny-knot capsize specifically: tied with the same crossings as a // reef/square knot but the wrong second half-hitch, it slips under load // into a different, weaker arrangement while a true reef knot would lock. // // Every strand is a single cubic bezier with a fixed anchor at the knot's // core (where it attaches to its neighbour) and a free end. Two named // control-point sets — DRESSED and CAPSIZED — describe the same four // strands in two different rope arrangements; a single scalar `load` drives // a ramp/hold/release cycle, and a second scalar `capsizeT` (0 = dressed, // 1 = capsized) drives a linear interpolation between the two control-point // sets, so the transition is always a continuous slide, never a swap. Which // loop currently reads as "on top" is shown the way rope diagrams show it — // a short gap cut into the strand passing underneath — and that gap swaps // sides in lockstep with capsizeT, so the loop that was on top visibly goes // under as it rolls through the capsize. // --------------------------------------------------------------------------- type Pt = { x: number; y: number }; type Cubic = { p0: Pt; p1: Pt; p2: Pt; p3: Pt }; interface KnotGeometry { standA: Cubic; standB: Cubic; loopA: Cubic; loopB: Cubic; } const CYCLE_MS = 8000; const RAMP_MS = 4500; const HOLD_MS = 1500; const RELEASE_MS = 2000; // RAMP + HOLD + RELEASE === CYCLE_MS const CAPSIZE_TRIGGER_LOAD = 0.92; const REDRESS_TRIGGER_LOAD = 0.3; const CAPSIZE_MS = 900; const REDRESS_MS = 700; const STAND_MODULATION = 0.06; // +/-6% standing-end reach with load // Normalised knot space, roughly [-1, 1]; scaled by the container's smaller // dimension at render time. Anchors (p0) are the structural attachment // points shared between a standing end and its loop, so they never move // between DRESSED and CAPSIZED — only the free geometry (p1, p2, p3) slides. const DRESSED: KnotGeometry = { standA: { p0: { x: -1.35, y: 1.35 }, p1: { x: -0.9, y: 0.75 }, p2: { x: -0.55, y: 0.35 }, p3: { x: -0.28, y: 0.05 } }, standB: { p0: { x: 1.35, y: -1.35 }, p1: { x: 0.9, y: -0.75 }, p2: { x: 0.55, y: -0.35 }, p3: { x: 0.28, y: -0.05 } }, loopA: { p0: { x: -0.28, y: 0.05 }, p1: { x: -0.15, y: -0.55 }, p2: { x: 0.45, y: -0.55 }, p3: { x: 0.15, y: 0.1 } }, loopB: { p0: { x: 0.28, y: -0.05 }, p1: { x: 0.15, y: 0.55 }, p2: { x: -0.45, y: 0.55 }, p3: { x: -0.15, y: -0.1 } }, }; // CAPSIZED: loopA has slipped off its mirror position and rolled to nest // alongside loopB instead of crossing opposite it — the granny-knot slip. // loopB shifts slightly too, as the strand receiving the new crossing. const CAPSIZED: KnotGeometry = { standA: DRESSED.standA, standB: DRESSED.standB, loopA: { p0: { x: -0.28, y: 0.05 }, p1: { x: -0.55, y: -0.15 }, p2: { x: -0.45, y: 0.55 }, p3: { x: 0.15, y: 0.35 } }, loopB: { p0: { x: 0.28, y: -0.05 }, p1: { x: 0.55, y: 0.15 }, p2: { x: 0.2, y: 0.6 }, p3: { x: -0.2, y: 0.25 } }, }; function lerp(a: number, b: number, t: number): number { return a + (b - a) * t; } function lerpPt(a: Pt, b: Pt, t: number): Pt { return { x: lerp(a.x, b.x, t), y: lerp(a.y, b.y, t) }; } function lerpCubic(a: Cubic, b: Cubic, t: number): Cubic { return { p0: lerpPt(a.p0, b.p0, t), p1: lerpPt(a.p1, b.p1, t), p2: lerpPt(a.p2, b.p2, t), p3: lerpPt(a.p3, b.p3, t) }; } function easeInOutSine(t: number): number { return 0.5 * (1 - Math.cos(Math.PI * t)); } /** De Casteljau split of a cubic bezier at parameter t: returns the two * sub-curves [0,t] and [t,1], each reparametrised to [0,1]. */ function splitCubic(c: Cubic, t: number): { left: Cubic; right: Cubic } { const p01 = lerpPt(c.p0, c.p1, t); const p12 = lerpPt(c.p1, c.p2, t); const p23 = lerpPt(c.p2, c.p3, t); const p012 = lerpPt(p01, p12, t); const p123 = lerpPt(p12, p23, t); const p0123 = lerpPt(p012, p123, t); return { left: { p0: c.p0, p1: p01, p2: p012, p3: p0123 }, right: { p0: p0123, p1: p123, p2: p23, p3: c.p3 }, }; } /** Sub-curve of `c` covering original parameter range [ta, tb] (0 <= ta < tb <= 1). */ function subCubic(c: Cubic, ta: number, tb: number): Cubic { const afterTa = splitCubic(c, ta).right; const localTb = (tb - ta) / (1 - ta); return splitCubic(afterTa, localTb).left; } function cubicToD(c: Cubic, ox: number, oy: number, s: number): string { const x = (n: number) => (ox + n * s).toFixed(2); const y = (n: number) => (oy + n * s).toFixed(2); return `M${x(c.p0.x)} ${y(c.p0.y)}C${x(c.p1.x)} ${y(c.p1.y)},${x(c.p2.x)} ${y(c.p2.y)},${x(c.p3.x)} ${y(c.p3.y)}`; } /** Renders a loop strand as one continuous path, or as two segments with a * gap cut around t=0.5 when `underAmount` (0..1) is > 0 — the rope-diagram * convention for "this strand passes underneath here". Gap half-width * grows from 0 to 0.09 in curve-parameter units as underAmount goes 0..1. */ function loopStrandPaths(c: Cubic, underAmount: number, ox: number, oy: number, s: number): string[] { if (underAmount <= 0.001) return [cubicToD(c, ox, oy, s)]; const half = 0.09 * underAmount; const segments: string[] = []; if (0.5 - half > 0.02) segments.push(cubicToD(subCubic(c, 0, 0.5 - half), ox, oy, s)); if (0.5 + half < 0.98) segments.push(cubicToD(subCubic(c, 0.5 + half, 1), ox, oy, s)); return segments; } /** Standing-end reach modulates +/-6% with load: pulled taut (longer, * straighter) as load rises, slack (shorter reach) as it falls. Only the * free end (p0) moves; the anchor stays fixed at the knot core. */ function tightenStand(c: Cubic, load: number): Cubic { const scale = 1 + STAND_MODULATION * (load - 0.5) * 2; const dx = c.p0.x - c.p3.x; const dy = c.p0.y - c.p3.y; return { ...c, p0: { x: c.p3.x + dx * scale, y: c.p3.y + dy * scale } }; } // CAPSIZE_MIDWAY: the reduced-motion freeze frame. capsizeT frozen at 0.5 — // mid-slide, neither dressed nor capsized, the single most structurally // informative frame — with load held at the capsize trigger point so the // standing ends read taut, matching the moment this frame is drawn from. const REDUCED_MOTION_CAPSIZE_T = 0.5; const REDUCED_MOTION_LOAD = CAPSIZE_TRIGGER_LOAD; export interface KnotCapsizeCycleProps { /** extra classes merged onto the rendered root element */ className?: string; } export function KnotCapsizeCycle({ className = "" }: KnotCapsizeCycleProps) { const rootRef = useRef(null); const svgRef = useRef(null); const standARef = useRef(null); const standBRef = useRef(null); const loopAGroupRef = useRef(null); const loopBGroupRef = useRef(null); useEffect(() => { const root = rootRef.current; const svg = svgRef.current; if (!root || !svg) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let disposed = false; let visible = true; let w = 0; let h = 0; let sized = false; let raf = 0; // capsize state machine: capsizeT 0 = dressed, 1 = capsized. let capsizeT = 0; let capsizePhase: "idle" | "capsizing" | "capsized" | "redressing" = "idle"; let capsizeStart = 0; let lastCycleIndex = -1; let capsizeTriggeredThisCycle = false; let redressTriggeredThisCycle = false; const render = (load: number, t: number) => { const s = Math.min(w, h) * 0.39; const ox = w / 2; const oy = h / 2; const standA = tightenStand(lerpCubic(DRESSED.standA, CAPSIZED.standA, t), load); const standB = tightenStand(lerpCubic(DRESSED.standB, CAPSIZED.standB, t), load); const loopA = lerpCubic(DRESSED.loopA, CAPSIZED.loopA, t); const loopB = lerpCubic(DRESSED.loopB, CAPSIZED.loopB, t); // At t=0 (dressed) loopA is under, loopB is over; at t=1 (capsized) // that flips. The gap amount tracks the interpolation continuously so // the "which one's on top" cue slides in step with the geometry. const loopAUnder = 1 - t; const loopBUnder = t; standARef.current?.setAttribute("d", cubicToD(standA, ox, oy, s)); standBRef.current?.setAttribute("d", cubicToD(standB, ox, oy, s)); const paintGroup = (group: SVGGElement | null, c: Cubic, underAmount: number) => { if (!group) return; const segs = loopStrandPaths(c, underAmount, ox, oy, s); while (group.children.length > segs.length) group.removeChild(group.lastChild as ChildNode); segs.forEach((d, i) => { let path = group.children[i] as SVGPathElement | undefined; if (!path) { path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute("fill", "none"); path.setAttribute("stroke", "currentColor"); path.setAttribute("stroke-width", "2.5"); path.setAttribute("stroke-linecap", "round"); group.appendChild(path); } path.setAttribute("d", d); }); }; // draw order: whichever loop is currently "over" is appended last so // it visually sits on top of the other at the crossing. if (loopAUnder >= loopBUnder) { paintGroup(loopAGroupRef.current, loopA, loopAUnder); paintGroup(loopBGroupRef.current, loopB, loopBUnder); svg.querySelector("#knot-loops")?.append(...[loopAGroupRef.current, loopBGroupRef.current].filter(Boolean) as SVGGElement[]); } else { paintGroup(loopAGroupRef.current, loopA, loopAUnder); paintGroup(loopBGroupRef.current, loopB, loopBUnder); svg.querySelector("#knot-loops")?.append(...[loopBGroupRef.current, loopAGroupRef.current].filter(Boolean) as SVGGElement[]); } }; const loadAt = (cyclePos: number): number => { if (cyclePos < RAMP_MS) return easeInOutSine(cyclePos / RAMP_MS); if (cyclePos < RAMP_MS + HOLD_MS) return 1; const releaseT = (cyclePos - RAMP_MS - HOLD_MS) / RELEASE_MS; return 1 - easeInOutSine(Math.min(1, releaseT)); }; const step = (now: number, elapsed: number) => { const cyclePos = elapsed % CYCLE_MS; const cycleIndex = Math.floor(elapsed / CYCLE_MS); if (cycleIndex !== lastCycleIndex) { lastCycleIndex = cycleIndex; capsizeTriggeredThisCycle = false; redressTriggeredThisCycle = false; } const load = loadAt(cyclePos); const inRamp = cyclePos < RAMP_MS; const inRelease = cyclePos >= RAMP_MS + HOLD_MS; if (inRamp && !capsizeTriggeredThisCycle && load >= CAPSIZE_TRIGGER_LOAD) { capsizeTriggeredThisCycle = true; capsizePhase = "capsizing"; capsizeStart = now; } if (inRelease && capsizeTriggeredThisCycle && !redressTriggeredThisCycle && load <= REDRESS_TRIGGER_LOAD) { redressTriggeredThisCycle = true; capsizePhase = "redressing"; capsizeStart = now; } if (capsizePhase === "capsizing") { const p = Math.min(1, (now - capsizeStart) / CAPSIZE_MS); capsizeT = easeInOutSine(p); if (p >= 1) capsizePhase = "capsized"; } else if (capsizePhase === "redressing") { const p = Math.min(1, (now - capsizeStart) / REDRESS_MS); capsizeT = 1 - easeInOutSine(p); if (p >= 1) capsizePhase = "idle"; } render(load, capsizeT); }; let startTime = 0; const loop = (now: number) => { raf = 0; if (!visible || !sized) return; if (startTime === 0) startTime = now; step(now, now - startTime); raf = requestAnimationFrame(loop); }; const measure = () => { const rect = root.getBoundingClientRect(); w = rect.width; h = rect.height; sized = w >= 2 && h >= 2; }; const start = () => { measure(); if (!sized) return; if (reduced) { render(REDUCED_MOTION_LOAD, REDUCED_MOTION_CAPSIZE_T); return; } if (!raf) raf = requestAnimationFrame(loop); }; // no paint before the first size + token-carrying layout is settled start(); let resizeTimer = 0; const ro = new ResizeObserver(() => { window.clearTimeout(resizeTimer); resizeTimer = window.setTimeout(() => { if (disposed) return; measure(); if (sized && !raf && !reduced) { raf = requestAnimationFrame(loop); } else if (sized && reduced) { render(REDUCED_MOTION_LOAD, REDUCED_MOTION_CAPSIZE_T); } }, 100); }); ro.observe(root); const io = new IntersectionObserver((entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible && sized && !raf && !reduced) { startTime = 0; raf = requestAnimationFrame(loop); } }); io.observe(root); return () => { disposed = true; cancelAnimationFrame(raf); raf = 0; window.clearTimeout(resizeTimer); ro.disconnect(); io.disconnect(); }; }, []); return (

); } 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L64",null,{"files":[{"path":"registry/core/knot-capsize-cycle/component.tsx","content":"$65","type":"registry:ui","target":"components/ui/knot-capsize-cycle.tsx"}],"className":"h-[70svh] min-h-80"}]]}]