4d: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"] 4e: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"] 4f: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"] 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"],"ScrollBar"] 51: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"] 52:T3d82,"use client"; import { useEffect, useRef } from "react"; import type { ReactNode } from "react"; // --------------------------------------------------------------------------- // SpiralChuteAccrete — a full-bleed ambient background reproducing a gravity // spiral chute: the helical slide sorting facilities and department-store // stockrooms use to move parcels/mail sacks between floors without powered // conveyance. Small parcels enter at the top, slide down a continuous // helical ramp under gravity alone (friction + the helix's banking keeps // speed roughly bounded rather than accelerating), and pile up in a landing // area at the base until the pile is swept clear. // // EVERYTHING IS A PURE FUNCTION OF ONE CLOCK. Rather than mutating an array // of live parcel/tile objects frame to frame, every quantity drawn — which // parcels are in flight, where each sits on the helix, which tiles are in // the current pile, which are mid-sweep-out — is derived straight from the // elapsed clock t (ms) and a fixed spawn index k. That is what makes the // state reproducible for prefers-reduced-motion: freezing the clock at a // named STATIC_T freezes the exact same layout every time, with no history // to serialize. // // spawn(k) = k * SPAWN_INTERVAL_MS (top of chute) // land(k) = spawn(k) + TRANSIT_MS (base of chute) // in flight = spawn(k) <= t < land(k) -> theta = (t-spawn(k))/TRANSIT_MS * THETA_MAX // landed = land(k) <= t -> becomes one pile tile // // PILE / SWEEP: the base landing area fills with one tile per landed // parcel, positioned by a period-9 deterministic jitter sequence keyed off // k % 9 (never per-frame randomness, so the pile shape is exactly // reproducible). Every SWEEP_PERIOD_MS the chute's current 9s fill cycle // ends and the NEXT cycle's landings start a fresh pile; the tiles that // belong to the cycle which just ended slide off to one side over // SWEEP_DURATION_MS, staggered SWEEP_STAGGER_MS apart, for the first // SWEEP_DURATION_MS of the new cycle only. This is derived directly from // `t % SWEEP_PERIOD_MS`, so a pile can never accumulate past one fill // cycle's worth of tiles and never breaches the canvas edge. // // REAL NUMBERS (all fixed, real-world-derived, not tuned per frame): a // parcel takes TRANSIT_MS to cross THE FULL 3.5 turns of the helix — this // is one of the rare cases where the legible rate and the real rate are // close, so descent renders close to real proportion instead of being // artificially decoupled. New parcels spawn every SPAWN_INTERVAL_MS, which // at a 3.6s transit keeps 2-3 parcels in flight simultaneously, each at a // different theta so they never overlap on the same winding — this // simultaneous-parcel count, not a faster descent, is the intended legible // signal for "alive," per the spec's own kill criteria. // // TOKENS: the ramp track itself is the least important thing on screen — // it renders at --ns-muted, a low, border-like contrast step, so it reads // as track rather than subject. Parcels and pile tiles are the moving // subject and render at --foreground so they clear the ramp with a real // luminance step in both themes. --ns-accent never appears; nothing here // is interaction chrome, and the pile-sweep moment (this component's one // climactic event) is a --foreground fade/slide only. // --------------------------------------------------------------------------- const TRANSIT_MS = 3600; // one parcel's full top-to-bottom transit const SPAWN_INTERVAL_MS = 1300; // cadence of new parcels entering at the top const TURNS = 3.5; // total revolutions top -> bottom const THETA_MAX = TURNS * Math.PI * 2; const SWEEP_PERIOD_MS = 9000; // pile fill/clear cycle length const SWEEP_DURATION_MS = 500; // how long a sweep-out takes const SWEEP_STAGGER_MS = 30; // stagger between tiles sliding away const RADIUS_FACTOR = 0.32; // spiral radius, as a fraction of min(w,h) const RAMP_TOP_FRAC = 0.1; // top margin, fraction of container height const RAMP_HEIGHT_FRAC = 0.68; // vertical extent of the helix, fraction of height const RAMP_SAMPLES = 240; // points used to build the cached ramp path const PARCEL_SIZE_FRAC = 0.05; // parcel edge length, fraction of min(w,h) const PILE_JITTER_FRAC = 0.075; // pile scatter radius, fraction of min(w,h) // deterministic period-9 jitter sequence (unit-ish offsets), keyed by // spawn index k % 9 — fixed, not per-frame random, so the pile shape is // reproducible frame to frame and across prefers-reduced-motion runs. const PILE_OFFSETS: readonly [number, number][] = [ [0.12, -0.22], [-0.38, 0.14], [0.44, 0.3], [-0.14, -0.42], [0.05, 0.42], [-0.46, -0.08], [0.26, -0.36], [-0.2, 0.36], [0.4, 0.04], ]; // prefers-reduced-motion freeze frame: named MID_DESCENT. Chosen mid-cycle // (71.7% into a 9s fill) so the pile is roughly half of a full cycle's // worth of tiles (3 landed of ~5 max) rather than freshly swept or about // to overflow, with two parcels still in flight at clearly different theta // — spiral, motion-implying spacing and an in-progress pile all visible // in one static composition. const STATIC_T = 6450; // live-mode warm start: t=0 on a bare clock is a near-empty chute (one // parcel just spawned, pile empty) — the spec's own t0 requirement is // "2-3 parcels visible at different points on the spiral, plus a partial // pile." Starting the live clock here instead of at 0 makes t0 already // alive without changing any rate: k=2/k=3 in flight (theta .71/.35), // pile at 2 tiles. Deliberately a different phase than STATIC_T so the // reduced-motion freeze is never mistaken for "just t0." const WARM_START_MS = 5150; function landTimeForIndex(k: number): number { return k * SPAWN_INTERVAL_MS + TRANSIT_MS; } interface FlightParcel { k: number; progress: number; // 0..1 along the helix } interface PileTile { k: number; sweepProgress: number; // 0 = resting in pile, 1 = fully slid away } /** Parcels currently in flight (spawned, not yet landed) at clock t. */ function computeFlight(t: number): FlightParcel[] { const out: FlightParcel[] = []; const maxK = Math.floor(t / SPAWN_INTERVAL_MS); for (let k = Math.max(0, maxK - 4); k <= maxK; k++) { const spawnAt = k * SPAWN_INTERVAL_MS; if (spawnAt < 0 || spawnAt > t) continue; const landAt = landTimeForIndex(k); if (t >= landAt) continue; out.push({ k, progress: (t - spawnAt) / TRANSIT_MS }); } return out; } /** * The pile as it should render at clock t: tiles landed in the CURRENT * fill cycle (sweepProgress 0, resting), plus — for the first * SWEEP_DURATION_MS of a new cycle only — the previous cycle's tiles, * staggered mid-slide-away. */ function computePile(t: number): PileTile[] { if (t < 0) return []; const cycleIndex = Math.floor(t / SWEEP_PERIOD_MS); const cycleStart = cycleIndex * SWEEP_PERIOD_MS; const sinceCycleStart = t - cycleStart; const out: PileTile[] = []; // current cycle's own landings so far const currentMaxK = Math.floor((t - TRANSIT_MS) / SPAWN_INTERVAL_MS); for (let k = Math.max(0, currentMaxK - 8); k <= currentMaxK; k++) { const landAt = landTimeForIndex(k); if (landAt > cycleStart && landAt <= t) { out.push({ k, sweepProgress: 0 }); } } // previous cycle's tiles, still sliding away in the first // SWEEP_DURATION_MS of this cycle if (cycleIndex > 0 && sinceCycleStart < SWEEP_DURATION_MS) { const prevCycleStart = cycleStart - SWEEP_PERIOD_MS; const prevMaxK = Math.floor((cycleStart - TRANSIT_MS) / SPAWN_INTERVAL_MS); const prevTiles: number[] = []; for (let k = Math.max(0, prevMaxK - 8); k <= prevMaxK; k++) { const landAt = landTimeForIndex(k); if (landAt > prevCycleStart && landAt <= cycleStart) prevTiles.push(k); } prevTiles.sort((a, b) => a - b); prevTiles.forEach((k, i) => { const localStart = i * SWEEP_STAGGER_MS; const local = sinceCycleStart - localStart; const span = SWEEP_DURATION_MS - localStart; const p = span <= 0 ? 1 : Math.max(0, Math.min(1, local / span)); if (p < 1) out.push({ k, sweepProgress: p }); }); } return out; } function easeOut(p: number): number { return 1 - (1 - p) * (1 - p); } export interface SpiralChuteAccreteProps { /** headline / CTA rendered centered over the chute */ children?: ReactNode; /** extra classes merged onto the root element */ className?: string; /** inline styles merged onto the root element */ style?: React.CSSProperties; } export function SpiralChuteAccrete({ children, className = "", style, }: SpiralChuteAccreteProps) { const rootRef = useRef(null); const canvasRef = useRef(null); useEffect(() => { const root = rootRef.current; const canvas = canvasRef.current; if (!root || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; // token fields start empty; nothing paints until readTokens() has run // at least once (guarded in draw() below) — closes every path (rAF // start, resize, IntersectionObserver resume) that could otherwise // paint a literal color before the first token read. let mutedColor = ""; let fgColor = ""; const readTokens = () => { const cs = getComputedStyle(document.documentElement); mutedColor = cs.getPropertyValue("--ns-muted").trim(); fgColor = cs.getPropertyValue("--foreground").trim(); }; let w = 0; let h = 0; let cx = 0; let radius = 0; let topY = 0; let rampHeight = 0; let baseX = 0; let baseY = 0; let parcelSize = 0; let pileJitter = 0; let sized = false; let visible = true; let raf = 0; let last = 0; let t = reduced ? STATIC_T : WARM_START_MS; // cached ramp path samples, rebuilt only on resize (geometry never // changes per frame — only scale/position do). let rampPath: Path2D | null = null; const pointOnHelix = (theta: number) => { const x = cx + radius * Math.sin(theta); const y = topY + (theta / THETA_MAX) * rampHeight; return [x, y] as const; }; const buildRampPath = () => { const path = new Path2D(); for (let i = 0; i <= RAMP_SAMPLES; i++) { const theta = (i / RAMP_SAMPLES) * THETA_MAX; const [x, y] = pointOnHelix(theta); if (i === 0) path.moveTo(x, y); else path.lineTo(x, y); } rampPath = path; const [bx, by] = pointOnHelix(THETA_MAX); baseX = bx; baseY = by; }; const resize = () => { const rect = root.getBoundingClientRect(); if (rect.width < 2 || rect.height < 2) { sized = false; return; } const isCard = !!canvas.closest("[data-autoplay-root]"); const dpr = isCard ? Math.min(0.75, window.devicePixelRatio || 1) : Math.min(window.devicePixelRatio || 1, 1.5); w = rect.width; h = rect.height; canvas.width = Math.max(1, Math.round(w * dpr)); canvas.height = Math.max(1, Math.round(h * dpr)); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const minDim = Math.min(w, h); cx = w / 2; // clamp against w/2 as well as min(w,h) — a container taller than // wide would otherwise let the helix clip both side edges. radius = Math.min(RADIUS_FACTOR * minDim, w * 0.4); topY = h * RAMP_TOP_FRAC; rampHeight = h * RAMP_HEIGHT_FRAC; parcelSize = Math.max(3, minDim * PARCEL_SIZE_FRAC); pileJitter = minDim * PILE_JITTER_FRAC; sized = true; buildRampPath(); }; const drawSquare = (x: number, y: number, size: number, alpha: number) => { ctx.globalAlpha = alpha; ctx.fillRect(x - size / 2, y - size / 2, size, size); }; const draw = () => { if (!sized || !fgColor || !mutedColor || !rampPath) return; ctx.clearRect(0, 0, w, h); // ramp track: the track, not the subject — low, border-like contrast ctx.globalAlpha = 1; ctx.strokeStyle = mutedColor; // floored well above the raw radius*0.02 scale — at card-preview // size (~400px, dpr 0.75) that scale alone thins under 2px and the // ramp risks disappearing on a light background, the exact failure // the spec calls out. Alpha raised to match; parcels/pile still // dominate at 0.92-0.95 --foreground. ctx.globalAlpha = 0.55; ctx.lineWidth = Math.max(1.5, radius * 0.02); ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.stroke(rampPath); // pile: current cycle's tiles plus any mid-sweep leftovers ctx.fillStyle = fgColor; const pile = computePile(t); for (const tile of pile) { const [ox, oy] = PILE_OFFSETS[((tile.k % 9) + 9) % 9]; const slideX = tile.sweepProgress > 0 ? easeOut(tile.sweepProgress) * (w * 0.7) : 0; const x = baseX + ox * pileJitter + slideX; const y = baseY + oy * pileJitter * 0.6; const alpha = 0.92 * (1 - tile.sweepProgress); if (alpha > 0.01) drawSquare(x, y, parcelSize * 0.9, alpha); } // in-flight parcels on the helix const flight = computeFlight(t); for (const parcel of flight) { const theta = parcel.progress * THETA_MAX; const [x, y] = pointOnHelix(theta); drawSquare(x, y, parcelSize, 0.95); } ctx.globalAlpha = 1; }; const loop = (now: number) => { const dt = last ? Math.min(50, now - last) : 1000 / 60; last = now; t += dt; draw(); if (visible && !document.hidden) raf = requestAnimationFrame(loop); }; let resizeTimer: ReturnType | null = null; const ro = new ResizeObserver(() => { if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout(() => { resizeTimer = null; resize(); if (reduced) draw(); }, 120); }); ro.observe(root); const io = new IntersectionObserver( (entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible && !reduced && !raf) { last = 0; raf = requestAnimationFrame(loop); } }, { threshold: 0 } ); io.observe(root); const onVis = () => { if (!document.hidden && visible && !reduced && !raf) { last = 0; raf = requestAnimationFrame(loop); } }; document.addEventListener("visibilitychange", onVis); const mo = new MutationObserver(() => { readTokens(); if (reduced || !raf) draw(); }); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); readTokens(); resize(); if (reduced) { draw(); } else { raf = requestAnimationFrame(loop); } return () => { cancelAnimationFrame(raf); if (resizeTimer) clearTimeout(resizeTimer); ro.disconnect(); io.disconnect(); mo.disconnect(); document.removeEventListener("visibilitychange", onVis); }; }, []); return (

); } 4c:["$","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,["$","$L4d",null,{"namespace":"@ns-ui","registryDependencies":[]}]]}],["$","$L4e",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":["$","$L4f",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"}]]}],["$","div","ns-accent",{"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-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L50",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":["$","$L4f",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"}]]}]]}],["$","$L50",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":["$","$L4f",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)"}]]}],["$","div","color-ns-accent",{"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-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L50",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L51",null,{"files":[{"path":"registry/loud/spiral-chute-accrete/component.tsx","content":"$52","type":"registry:ui","target":"components/ui/spiral-chute-accrete.tsx"}],"className":"h-[70svh] min-h-80"}]]}]