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:T2dac,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // WeltChannelClose — a full-width section divider modeled on Goodyear-welted // shoe construction. A channel is skived into the insole rib to expose it; a // curved awl and needle lockstitch a welt to the upper and insole rib through // that open channel; immediately behind the working point, the lifted channel // flap that exposed the rib is folded back down and pressed flush, PERMANENTLY // CONCEALING the just-completed stitching under the insole surface. The // outer edge only ever shows a plain seam — the lockstitch itself is hidden // the moment it is finished. // // This is deliberately NOT a restyle of bobbin-lace-pricking (pin-pull): // that component draws every crossing thread and removes a placed PIN once // its crossing has secured, on canvas. This component never draws a thread // crossing at all — the lockstitch is conceptually always hidden inside the // channel — and what the viewer actually sees is a real DOM/CSS 3D hinge // transform (rotateX) folding a physical FLAP shut over the seam, plus a // needle that pokes and withdraws at a single working point. Different // mechanic (fold-and-conceal vs. pin-pull), different visible event (a // hinge closing vs. a thread crossing + pin sliding out), different // rendering technique (real DOM elements + CSS custom properties vs. // canvas 2D draw calls). // // TIMELINE — one continuous clock, no per-stitch React state: // currentStitchFloat = elapsedMs / STITCH_INTERVAL_MS (smooth fractional // stitch depth) // currentIndex = floor(currentStitchFloat) (stitch the // needle is // actively locking) // feedDistance = currentStitchFloat * CELL_SPACING (px the whole // strip has fed // left, in lockstep // with the stitch // count so the // working point // never drifts more // than one cell) // // Every stitch position i is classified purely by ageMs = elapsedMs - // i * STITCH_INTERVAL_MS (can be negative — a stitch not yet reached): // ageMs < FLAP_LAG_MS flap open (channel skived, not yet // worked, or just locked and still // waiting its FLAP_LAG turn) — lift = 1 // FLAP_LAG_MS <= ageMs < +FOLD_MS the fold itself: an eased rotateX // hinge from lift=1 to lift=0 over // FOLD_MS, transform-origin on the // trailing (already-closed) edge // ageMs >= FLAP_LAG_MS + FOLD_MS flush — folded flat, permanently // closed, drawn only as part of the single // continuous seam hairline behind it // // Because ageMs is linear in i, the boundary between "still open" and // "already flush" trails the working point by a FIXED number of stitches // ((FLAP_LAG_MS + FOLD_MS) / STITCH_INTERVAL_MS), so the flush seam's // length is a single constant offset from the working point's screen // position — computed once per frame, not accumulated or re-measured. // --------------------------------------------------------------------------- const CELL_SPACING = 14; // px per stitch — ~6-7 stitches/inch welt gauge at card DPI const STITCH_INTERVAL_MS = 1050; // one lockstitch, comfortably above the 1s legibility floor const FLAP_LAG_STITCHES = 3; // a flap stays open until its stitch is this many positions old const FLAP_LAG_MS = FLAP_LAG_STITCHES * STITCH_INTERVAL_MS; const FOLD_MS = 260; // fold transition duration — explicit hinge, never a blink const NEEDLE_MS = 420; // needle in -> lock -> out, timed inside each stitch's own interval const WORKING_X_FRAC = 0.45; // working point's fixed screen fraction across the strip const POOL_SIZE = 200; // generous fixed DOM pool; covers dividers well past 2000px wide const STATIC_STITCH_INDEX = 8; // reduced-motion: which stitch's crossing to freeze mid-lock const STATIC_T_MS = STATIC_STITCH_INDEX * STITCH_INTERVAL_MS + NEEDLE_MS / 2; // MID_LOCK function easeOutCubic(x: number): number { const t = 1 - x; return 1 - t * t * t; } export interface WeltChannelCloseProps { /** band height in px. Flap/needle size derive from this, the strip's own smaller dimension. Default 44. */ height?: number; className?: string; } export function WeltChannelClose({ height = 44, className = "" }: WeltChannelCloseProps) { const wrapRef = useRef(null); const seamRef = useRef(null); const needleRef = useRef(null); const flapRefs = useRef<(HTMLDivElement | null)[]>([]); useEffect(() => { const wrap = wrapRef.current; const seam = seamRef.current; const needle = needleRef.current; if (!wrap || !seam || !needle) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let width = 0; let sized = false; let visible = true; let raf = 0; const resize = () => { const rect = wrap.getBoundingClientRect(); width = rect.width; sized = width >= 2; }; // -- render is a pure function of elapsedMs: nothing here is persisted // per-stitch state, so re-indexing which pool slot represents which // stitch (as the visible window slides) never loses or restarts an // in-flight fold. ------------------------------------------------------ const render = (elapsedMs: number) => { if (!sized) return; const currentStitchFloat = elapsedMs / STITCH_INTERVAL_MS; const currentIndex = Math.floor(currentStitchFloat); const feedDistance = currentStitchFloat * CELL_SPACING; const workingX = width * WORKING_X_FRAC; const iMin = Math.floor((feedDistance - workingX) / CELL_SPACING) - 1; const iMax = Math.ceil((feedDistance + (width - workingX)) / CELL_SPACING) + 1; const visibleCount = Math.min(POOL_SIZE, Math.max(0, iMax - iMin + 1)); for (let p = 0; p < POOL_SIZE; p++) { const el = flapRefs.current[p]; if (!el) continue; if (p >= visibleCount) { el.style.display = "none"; continue; } const i = iMin + p; const screenX = workingX + i * CELL_SPACING - feedDistance; const ageMs = elapsedMs - i * STITCH_INTERVAL_MS; let lift: number; if (ageMs < FLAP_LAG_MS) { lift = 1; } else if (ageMs < FLAP_LAG_MS + FOLD_MS) { const foldProgress = (ageMs - FLAP_LAG_MS) / FOLD_MS; lift = 1 - easeOutCubic(foldProgress); } else { lift = 0; } el.style.display = "block"; el.style.transform = `translateX(${screenX.toFixed(2)}px)`; el.style.setProperty("--lift", lift.toFixed(4)); } // flush seam: constant lag behind the working point (derived in the // header comment), so its length needs no per-stitch loop at all. const boundaryOffset = (CELL_SPACING * (FLAP_LAG_MS + FOLD_MS)) / STITCH_INTERVAL_MS; const seamWidth = Math.max(0, workingX - boundaryOffset); seam.style.width = `${seamWidth.toFixed(2)}px`; // needle: only present during its own stitch's 420ms crossing window, // drifting with the feed the same as every other stitch position. const needleLocalMs = elapsedMs - currentIndex * STITCH_INTERVAL_MS; const needleActive = needleLocalMs <= NEEDLE_MS; const needleX = workingX + currentIndex * CELL_SPACING - feedDistance; const depth = needleActive ? Math.sin((Math.min(1, needleLocalMs / NEEDLE_MS)) * Math.PI) : 0; needle.style.transform = `translateX(${needleX.toFixed(2)}px) scaleY(${(0.25 + 0.75 * depth).toFixed(3)})`; needle.style.opacity = needleActive ? "1" : "0"; }; let startTime = 0; const loop = (now: number) => { if (!startTime) startTime = now; render(now - startTime); if (visible && !document.hidden) raf = requestAnimationFrame(loop); }; const start = () => { if (reduced) { render(STATIC_T_MS); return; } startTime = 0; cancelAnimationFrame(raf); raf = requestAnimationFrame(loop); }; let resizeTimer: ReturnType | null = null; const onResize = () => { if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout(() => { resizeTimer = null; resize(); if (reduced) render(STATIC_T_MS); }, 120); }; const ro = new ResizeObserver(onResize); ro.observe(wrap); const io = new IntersectionObserver( (entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible && !document.hidden && !reduced) { cancelAnimationFrame(raf); raf = requestAnimationFrame(loop); } }, { threshold: 0 }, ); io.observe(wrap); const onVis = () => { cancelAnimationFrame(raf); if (!document.hidden && visible && !reduced) raf = requestAnimationFrame(loop); }; document.addEventListener("visibilitychange", onVis); resize(); start(); return () => { cancelAnimationFrame(raf); if (resizeTimer) clearTimeout(resizeTimer); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", onVis); }; }, []); const flapSize = Math.max(10, height * 0.5); return (

{Array.from({ length: POOL_SIZE }).map((_, p) => (

{ flapRefs.current[p] = el; }} className="ns-wcc-flap" style={{ display: "none" }} /> ))} ); } 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/welt-channel-close/component.tsx","content":"$65","type":"registry:ui","target":"components/ui/welt-channel-close.tsx"}],"className":"h-[70svh] min-h-80"}]]}]