4e:I[707087,["/_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"],"RegistryDependencies"] 4f:I[544296,["/_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"],"ItemStyles"] 50: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/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"],"ScrollArea"] 51: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/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"],"ScrollBar"] 52: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"] 53:T3346,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // DividerTelephoneCordDelam — a full-width section divider rendered as a // thin-film DELAMINATION BUCKLE: a compressed film bonded to a substrate // that has debonded and popped upward into a wandering ridge. Real thin-film // mechanics (silicon-nitride-on-polymer, DLC coatings, dried paint) show the // debonding front does not run straight — it telescopes side to side as it // advances, producing the "telephone cord" morphology: a roughly // constant-width ridge, a characteristic wander wavelength, and recurring // branch points where the front forks. // // DISTINCT FROM THE BANDED-ACCRETION FAMILY (growth-ring, cambium-lay, // lamina-dome): those deposit material in concentric layers over time — the // pattern GROWS OUTWARD as new rings are laid down. This divider has no // deposition step at all; the film is already there, fully formed, and what // moves is a compressive FAILURE FRONT propagating and re-forking through // existing material. Same "material process over time" register, opposite // physics — accretion adds, buckling fails. // // DISTINCT FROM CRAZE-RULE: craze-rule's fracture is a one-shot arrival — // an IntersectionObserver fires once, a dash-offset transition draws the // crack in, and after a brief idle creep it is finished and static. This // divider never finishes: the buckle front is a continuous function of // time, always sweeping and re-forking, because a delaminating film keeps // failing under sustained compressive stress rather than reaching a healed // resting state. // // GEOMETRY. The ridge centerline is a domain-scrolling sum of two sine // waves — wavelength set as a FRACTION of the measured container width // (not a fixed pixel constant), so the wander reads at the same relative // scale whether the strip is narrow or wide. A second, independent process // spawns short-lived parallel BRANCH ridges on a fixed cadence (derived // deterministically from the clock, not stored state) that diverge from the // main ridge, run alongside it for a stretch, and fade — the recurring // "re-branching" the brief calls for, not a single fork. // // SHADING — RAISED IN BOTH THEMES WITHOUT INVERTING. A raised ridge needs a // highlight edge and a shadow edge that stay bright/dark respectively // regardless of theme; naively offsetting one edge toward the raw // --foreground token and the other toward raw --background would FLIP which // edge is bright between themes (foreground is dark-on-light in light // theme, light-on-dark in dark theme) — that inversion is a real bug this // project shipped once already. Instead both tokens are parsed to RGB and // compared by luminance at read time; the emboss always uses whichever of // the two is brighter for the highlight offset-stroke and whichever is // darker for the shadow offset-stroke, so the same geometric edge of the // ridge reads as lit in both polarities. The flat, un-buckled film between // ridges is a faint --ns-muted baseline — never --border, which is a // separator token invisible as a fill/stroke in light theme. // --------------------------------------------------------------------------- export interface DividerTelephoneCordDelamProps { /** band height in px. Ridge width and wander wavelength derive from this and the measured width. Default 56. */ height?: number; className?: string; } // wander wavelength as a fraction of measured width — keeps the ridge // reading at the same relative scale narrow or wide, never "zoomed in" const WIGGLES_PER_WIDTH = 5.2; const HARMONIC_MULT = 2.35; // incommensurate multiplier -> telescoping wander, not a clean sinusoid const SCROLL_SPEED_1 = 0.16; // rad/s const SCROLL_SPEED_2 = 0.27; const BRANCH_INTERVAL_MS = 2400; // cadence a new fork attempt spawns on const BRANCH_DURATION_MS = 1900; // how long a fork stays visible before fading const BRANCH_SPAN_FRAC = 0.16; // fraction of width a branch runs alongside the main ridge // the frame prefers-reduced-motion freezes on: t=3.2s lands mid-life inside // branch index 1 (spawns at 2.4s, 1.9s duration -> life progress ~0.42) with // the main wander already well developed across the strip — a non-t0 frame // with both the wandering ridge and a branch clearly formed, never a // degenerate edge-of-cycle state const STATIC_TIME_S = 3.2; function hexToRgb(hex: string): [number, number, number] | null { const s = hex.trim().replace("#", ""); if (s.length !== 6 && s.length !== 3) return null; const full = s.length === 3 ? s.split("").map((c) => c + c).join("") : s; const n = Number.parseInt(full, 16); if (Number.isNaN(n)) return null; return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; } const luminance = ([r, g, b]: [number, number, number]) => 0.2126 * r + 0.7152 * g + 0.0722 * b; const rgbStr = ([r, g, b]: [number, number, number], a: number) => `rgba(${r},${g},${b},${a})`; const lerp3 = (a: [number, number, number], b: [number, number, number], t: number): [number, number, number] => [ a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t, ]; /** mulberry32 — deterministic given a seed, used only to key each branch's shape off its own index */ function mulberry32(seed: number) { let s = seed | 0; return () => { s = (s + 0x6d2b79f5) | 0; let t = Math.imul(s ^ (s >>> 15), 1 | s); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } function mainCenterY(x: number, t: number, width: number, midY: number, ampA: number, ampB: number) { const k1 = (2 * Math.PI * WIGGLES_PER_WIDTH) / width; const y1 = ampA * Math.sin(k1 * x - SCROLL_SPEED_1 * t); const y2 = ampB * Math.sin(k1 * HARMONIC_MULT * x - SCROLL_SPEED_2 * t + 1.7); return midY + y1 + y2; } function activeBranch(t: number, width: number) { const idx = Math.floor((t * 1000) / BRANCH_INTERVAL_MS); const localMs = t * 1000 - idx * BRANCH_INTERVAL_MS; if (localMs > BRANCH_DURATION_MS) return null; const rng = mulberry32(idx + 1); const startFrac = 0.08 + rng() * 0.68; const startX = startFrac * width; const spanX = width * BRANCH_SPAN_FRAC * (0.8 + rng() * 0.4); const side = rng() < 0.5 ? -1 : 1; const life = localMs / BRANCH_DURATION_MS; // 0..1 return { startX, spanX, side, life }; } export function DividerTelephoneCordDelam({ height = 56, className = "", }: DividerTelephoneCordDelamProps) { const wrapRef = useRef(null); const canvasRef = useRef(null); useEffect(() => { const wrap = wrapRef.current; const canvas = canvasRef.current; if (!wrap || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; // -- tokens: start empty, assigned unconditionally from getComputedStyle, // nothing paints before the first read below -- let mutedRgb: [number, number, number] = [0, 0, 0]; let brightRgb: [number, number, number] = [0, 0, 0]; let darkRgb: [number, number, number] = [0, 0, 0]; let tokensReady = false; const readTokens = () => { const cs = getComputedStyle(document.documentElement); const fg = hexToRgb(cs.getPropertyValue("--foreground")) ?? [0, 0, 0]; const bg = hexToRgb(cs.getPropertyValue("--background")) ?? [0, 0, 0]; const mu = hexToRgb(cs.getPropertyValue("--ns-muted")) ?? [0, 0, 0]; mutedRgb = mu; // luminance-sorted, not positionally fixed -> the same geometric edge // of the ridge stays bright/dark in both themes (see header comment) if (luminance(fg) >= luminance(bg)) { brightRgb = fg; darkRgb = bg; } else { brightRgb = bg; darkRgb = fg; } tokensReady = true; }; let width = 0; let midY = height / 2; let sized = false; const resize = () => { const rect = wrap.getBoundingClientRect(); width = rect.width; if (width < 2) { sized = false; return; } const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = Math.max(1, Math.round(width * dpr)); canvas.height = Math.max(1, Math.round(height * dpr)); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); midY = height / 2; sized = true; }; const ridgeW = () => Math.max(6, Math.min(22, height * 0.28)); const draw = (t: number) => { if (!sized || !tokensReady) return; ctx.clearRect(0, 0, width, height); const ampA = height * 0.22; const ampB = height * 0.1; const rw = ridgeW(); // -- flat unbuckled film baseline: faint, always present, --ns-muted -- ctx.strokeStyle = rgbStr(mutedRgb, 0.22); ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(0, midY); ctx.lineTo(width, midY); ctx.stroke(); const drawBevelPath = ( pathFn: (x: number) => number, x0: number, x1: number, w: number, alphaMul: number, ) => { const step = Math.max(2, width / 220); // shadow stroke: offset toward the falling edge, broad + dim ctx.strokeStyle = rgbStr(darkRgb, 0.5 * alphaMul); ctx.lineWidth = w * 1.05; ctx.lineCap = "round"; ctx.beginPath(); for (let x = x0; x <= x1; x += step) { const y = pathFn(x) + w * 0.4; if (x === x0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.stroke(); // highlight stroke: offset toward the rising edge, narrower + bright ctx.strokeStyle = rgbStr(brightRgb, 0.55 * alphaMul); ctx.lineWidth = w * 0.85; ctx.beginPath(); for (let x = x0; x <= x1; x += step) { const y = pathFn(x) - w * 0.4; if (x === x0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.stroke(); // crest: thin, crisp, brightest — the true top of the buckle ctx.strokeStyle = rgbStr(brightRgb, 0.85 * alphaMul); ctx.lineWidth = w * 0.32; ctx.beginPath(); for (let x = x0; x <= x1; x += step) { const y = pathFn(x); if (x === x0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.stroke(); }; drawBevelPath((x) => mainCenterY(x, t, width, midY, ampA, ampB), 0, width, rw, 1); const branch = activeBranch(t, width); if (branch) { // fade in/out across the branch's life so it materializes and // dissolves rather than popping — the front "catching" then // healing, matching real delamination re-forking const fade = Math.sin(Math.min(1, branch.life) * Math.PI); const x0 = branch.startX; const x1 = Math.min(width, branch.startX + branch.spanX); drawBevelPath( (x) => { const p = (x - x0) / (branch.spanX || 1); const lateral = branch.side * rw * 1.8 * Math.sin(Math.min(1, p) * Math.PI); return mainCenterY(x, t, width, midY, ampA, ampB) + lateral; }, x0, x1, rw * 0.72, fade, ); } }; // -- loop, paused offscreen and when the tab is hidden -- let raf = 0; let visible = true; const startTime = performance.now(); const loop = (now: number) => { const t = (now - startTime) / 1000; draw(t); if (visible && !document.hidden) raf = requestAnimationFrame(loop); }; const io = new IntersectionObserver( (entries) => { for (const e of entries) visible = e.isIntersecting; 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); const ro = new ResizeObserver(() => { resize(); if (reduced) draw(STATIC_TIME_S); }); ro.observe(wrap); const mo = new MutationObserver(() => { readTokens(); if (reduced) draw(STATIC_TIME_S); }); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); readTokens(); resize(); if (reduced) { draw(STATIC_TIME_S); } else { raf = requestAnimationFrame(loop); } return () => { cancelAnimationFrame(raf); io.disconnect(); ro.disconnect(); mo.disconnect(); document.removeEventListener("visibilitychange", onVis); }; }, [height]); return (

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@ns-ui","registryDependencies":[]}]]}],["$","$L4f",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L50",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-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":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}]]}],["$","$L51",null,{"orientation":"horizontal"}]]}]}]]}],["$","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":["$","$L50",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-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":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L51",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L50",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-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-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}]]}],["$","$L51",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L52",null,{"files":[{"path":"registry/core/divider-telephone-cord-delam/component.tsx","content":"$53","type":"registry:ui","target":"components/ui/divider-telephone-cord-delam.tsx"}],"className":"h-[70svh] min-h-80"}]]}]