63: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/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"],"RegistryDependencies"] 64: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/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"],"ItemStyles"] 65: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/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"],"ScrollArea"] 66: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/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"],"ScrollBar"] 67: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"] 68:T5bee,"use client"; import { useEffect, useRef, useState, type ReactNode } from "react"; // --------------------------------------------------------------------------- // FloretPack — a full-bleed phyllotactic background that is genuinely GROWN, // not evaluated. A meristem at the container's centre births one primordium // per plastochron at theta = orderIndex * 137.50776deg (the golden angle, // sequential, mod 360 — never batch-computed). Each floret's radial motion // is the exact analytic solution of dr/dt = K/r (area-conserving outward // advection) taken from its own age, and on top of that a local repulsion // pass every 30Hz tick nudges it against its birth-order neighbours, capped // at 0.3px/tick, and that nudge is never pulled back to a target lattice — // it is a permanent record of packing history. It is THIS relaxation, not // the golden angle itself, that turns a field of jittered newborns into the // visible 34/55 parastichy spirals a few rows out; switch it off and every // floret just advects along its own fixed noisy ray with nothing to // reorganise it, so the spirals visibly smear — the falsifiable tell that // this is grown, not sampled from the closed-form Vogel layout r=c*sqrt(n). // // Every floret is one pre-mounted, absolutely-positioned div, pooled at a // fixed size (maxPrimordia) and updated only via style.transform / opacity / // backgroundColor from a direct-DOM rAF loop — no React state on the hot // path, no canvas, no WebGL. A slot's index is literally birth order modulo // the pool size, so the pool recycles itself exactly when a primordium // reaches the rim (its radial lifetime is tuned to equal maxPrimordia // plastochrons), with no separate free-list bookkeeping. // // Distinct from background-lloyd-relax: Lloyd relaxation converges toward a // centroidal equilibrium and would sit still if the density field ever held // still — it has no source and no sink. FloretPack has a permanent source // (the meristem, always emitting) and a permanent sink (the rim, always // consuming), a steady-state growth flow, and its local order comes from // divergence-angle arrival history, never a centroidal correction. // --------------------------------------------------------------------------- const GOLDEN_ANGLE_RAD = (137.50776405003785 * Math.PI) / 180; const TICK_MS = 1000 / 30; // fixed 30Hz physics step const R0 = 3; // meristem birth radius, px const NEIGHBOR_WINDOW = 10; // +-N birth-order slots searched for spatial neighbours const NEIGHBOR_COUNT = 4; // 4-neighbour soft repulsion const DESIRED_SPACING = 4; // px — the repulsion pass's target inter-floret spacing const REPEL_STRENGTH = 0.9; const MAX_STEP_PX = 0.3; // capped displacement per 30Hz tick const RIM_FADE_START = 0.85; // senescence band: last 15% of the radial lifetime const BIRTH_FADE_FRAC = 0.06; // opacity/scale ramp-in over the first 6% of lifetime const DOT_SIZE = 10; // px, fully-grown dot diameter — sized against the ~27px mean spacing an inscribed rim gives, so the parastichy families read as lines rather than as scattered specks const DOT_MIN_SCALE = 0.35; const WARMUP_PLASTOCHRONS = 500; const JITTER_MAX_PX = 2.2; // --- MOTION VARIANT (switchable, ship value at the bottom) ----------------- // Three passes of tuning the existing radial-advection smoothness each still // read as "movement is bad" — the field was moving correctly but too slowly // to perceive (measured ~0.4px/s at r=100 with the pre-existing defaults) and // only ever moved in one register (outward). These are three DIFFERENT // motion treatments, not three more tunings of the same one: // "drift" — the component's existing analytic radial outflow on its own, // for comparison/debugging — individual florets stream from // meristem to rim, nothing else moves. // "spin" — the shipped default: "drift" PLUS the whole resolved field // rotating as one rigid frame (a fixed deg/s added uniformly to // every floret's render angle, applied at the theta->x/y // resolution step, so it rides on top of the unchanged radial // advection and birth-order relaxation rather than replacing // either). The 34/55 spiral families visibly turn as a unit // WHILE still streaming outward at the same speed as "drift" — // this is the "rotating growth" the owner asked for, not a // separate spinning-graphic mode. // "pulse" — "drift", plus a slow sinusoidal multiplier on every floret's // resolved radius, so the whole head rhythmically breathes // in/out rather than only advecting one direction. // All three still run the same emission clock, golden-angle placement and // birth-order repulsion — only how the resolved (theta, r) maps to (x, y) // changes, so packing/relaxation history is identical across variants. const MOTION: "drift" | "spin" | "pulse" = "spin"; // deg/s the whole head rotates in "spin". Chosen so a floret's own radial // lifetime (how long it takes one primordium to travel meristem -> rim) // completes well under one full head rotation: at the demo's ~25s lifetime, // 6deg/s is a 150deg turn per floret generation — enough that the spiral // families visibly precess between frames a few seconds apart, not enough // that any single rotation reads as a spinning logo. At the documented // production defaults (plastochron 1400ms/maxPrimordia 700, ~980s lifetime) // the same 6deg/s reads as calm long-run drift of the whole pattern, never a // pinwheel. const SPIN_DEG_PER_S = 6; const PULSE_AMPL = 0.06; // "pulse" only — +/- fraction of resolved radius const PULSE_PERIOD_S = 3.2; // "pulse" only — one breathe in + out function mulberry32(seed: number): () => number { let a = seed >>> 0 || 1; return () => { 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; }; } interface RGB { r: number; g: number; b: number; } function parseHex(raw: string): RGB | null { const m = /^#?([0-9a-f]{6})$/i.exec(raw.trim()); if (!m || !m[1]) return null; const int = parseInt(m[1], 16); return { r: (int >> 16) & 255, g: (int >> 8) & 255, b: int & 255 }; } function lerpChannel(a: number, b: number, t: number): number { return Math.round(a + (b - a) * t); } // Three token stops from --ns-muted (young) toward --foreground (mature), // read live so a theme flip re-derives them without a remount. function readStops(): string[] { const cs = getComputedStyle(document.documentElement); const muted = parseHex(cs.getPropertyValue("--ns-muted")) ?? { r: 143, g: 143, b: 143 }; const fg = parseHex(cs.getPropertyValue("--foreground")) ?? { r: 237, g: 237, b: 237 }; return [0, 0.5, 1].map( (t) => `rgb(${lerpChannel(muted.r, fg.r, t)},${lerpChannel(muted.g, fg.g, t)},${lerpChannel(muted.b, fg.b, t)})` ); } export interface FloretPackProps { /** Content overlaid on a bg-background/70 scrim above the growing head. */ children?: ReactNode; /** Plastochron — ms between successive primordium emissions. ~1.4s reads as organic; faster reads as popcorn, slower as frozen. */ plastochron?: number; /** Live primordia population cap — also the pool size and, by construction, the radial lifetime in plastochrons. */ maxPrimordia?: number; className?: string; } export function FloretPack({ children, plastochron = 1400, maxPrimordia = 700, className = "" }: FloretPackProps) { const rootRef = useRef(null); const elRefs = useRef<(HTMLDivElement | null)[]>([]); const [reduced, setReduced] = useState(false); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReduced(mq.matches); const onChange = (e: MediaQueryListEvent) => setReduced(e.matches); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); useEffect(() => { const root = rootRef.current; if (!root) return; const n = maxPrimordia; const theta = new Float32Array(n); const bornAt = new Float32Array(n); // ms, sim clock const bornOrder = new Int32Array(n).fill(-1); const ox = new Float32Array(n); const oy = new Float32Array(n); const posX = new Float32Array(n); const posY = new Float32Array(n); // Render-interpolation buffers: the physics tick is fixed at 30Hz // (TICK_MS) but rAF fires at display rate (60/120Hz). Without these, the // last tick's posX/posY got re-applied verbatim to the DOM on every // in-between frame, so a tracked dot's per-frame render delta alternated // "0px for 1-2 frames, then a multi-px jump" — a beat between the 30Hz // physics step and the display's refresh rate, not smooth advection. // prevPosX/Y hold the position as of the second-most-recent tick; // applyToDOM lerps toward the latest tick by the leftover accumulator // fraction every frame, so the rendered position moves a little every // single frame instead of only on tick boundaries. const prevPosX = new Float32Array(n); const prevPosY = new Float32Array(n); const prevBornOrder = new Int32Array(n).fill(-1); const maturity = new Float32Array(n); const dx = new Float32Array(n); const dy = new Float32Array(n); const lastColorIdx = new Int8Array(n).fill(-1); const candD2: number[] = new Array(NEIGHBOR_WINDOW * 2); const candDx: number[] = new Array(NEIGHBOR_WINDOW * 2); const candDy: number[] = new Array(NEIGHBOR_WINDOW * 2); const rand = mulberry32(0x9e3779b9); let stops = readStops(); let w = 0; let h = 0; let cx = 0; let cy = 0; let rRim = 100; let growthK = 1; let lifetimeMs = maxPrimordia * plastochron; let simAge = 0; let nextEmitAt = 0; let emitOrder = 0; let started = false; let raf = 0; let lastT = 0; let acc = 0; const measure = () => { const rect = root!.getBoundingClientRect(); w = rect.width; h = rect.height; cx = w / 2; cy = h / 2; // The rim is the INSCRIBED circle, not the half-diagonal. Advection is // area-conserving, so a head whose rim is the half-diagonal spreads the // same maxPrimordia florets over ~1.7x the area AND pushes the rim off // screen entirely: the result is a uniform full-bleed scatter with no // visible head, no rim, and parastichy families too sparse to read as // spirals at all. Inscribing the head puts the whole flower in frame. rRim = Math.min(cx, cy) * 0.92; }; const spawn = (order: number, atMs: number) => { const slot = order % n; // modulo 2*PI keeps the stored angle small (single-precision friendly) // over very long mount times without changing the golden-angle rule. theta[slot] = (order * GOLDEN_ANGLE_RAD) % (Math.PI * 2); bornAt[slot] = atMs; bornOrder[slot] = order; const jAng = rand() * Math.PI * 2; const jMag = rand() * JITTER_MAX_PX; ox[slot] = Math.cos(jAng) * jMag; oy[slot] = Math.sin(jAng) * jMag; lastColorIdx[slot] = -1; }; // Resolves the analytic radial position (age -> r -> Cartesian, plus the // persisted relaxation offset) for every live floret against the // CURRENT cx/cy/growthK. Reused after a resize (reproject in place, no // physics advance) and as the first pass of stepPhysics. const computePositions = () => { // Rigid rotation and radial breathing are applied here, at the // theta/r -> x/y resolution step, so they ride on top of the // unchanged analytic advection and repulsion history rather than // replacing either — see the MOTION comment above. const spinRad = MOTION === "spin" ? ((simAge / 1000) * SPIN_DEG_PER_S * Math.PI) / 180 : 0; const pulseMult = MOTION === "pulse" ? 1 + PULSE_AMPL * Math.sin(((simAge / 1000 / PULSE_PERIOD_S) * Math.PI) * 2) : 1; for (let slot = 0; slot < n; slot++) { if (bornOrder[slot] < 0) continue; const age = Math.max(0, simAge - (bornAt[slot] ?? 0)); const m = Math.min(1, age / lifetimeMs); maturity[slot] = m; // Continuous, not quantised: rounding this to a 4px grid (the old // behaviour) reads as fine-grained packing structure once you're // comparing sampled positions, but every floret's radius crosses a // 4px boundary at a different moment and pops there instantly — with // the accumulator fix elsewhere in this file actually running // physics at its intended ~30Hz (it previously fired only a handful // of times in 3s, which buried this), those pops became frequent // enough to read as the whole field stuttering rather than smooth // outward advection. The repulsion pass below still enforces // DESIRED_SPACING in continuous space, so the parastichy packing is // unaffected — only the render position stops jumping. const rBase = Math.sqrt(R0 * R0 + 2 * growthK * age) * pulseMult; const t = (theta[slot] ?? 0) + spinRad; posX[slot] = cx + rBase * Math.cos(t) + (ox[slot] ?? 0); posY[slot] = cy + rBase * Math.sin(t) + (oy[slot] ?? 0); } }; // Advances the sim clock, spawns due primordia, resolves the analytic // radial position for every live floret, then runs one pass of capped // 4-neighbour soft repulsion on top. Pure physics — no DOM writes. const stepPhysics = (dtMs: number, capScale: number) => { simAge += dtMs; while (simAge >= nextEmitAt) { spawn(emitOrder, nextEmitAt); emitOrder++; nextEmitAt += plastochron; } computePositions(); const cap = MAX_STEP_PX * capScale; for (let i = 0; i < n; i++) { if (bornOrder[i] < 0) { dx[i] = 0; dy[i] = 0; continue; } let count = 0; for (let off = -NEIGHBOR_WINDOW; off <= NEIGHBOR_WINDOW; off++) { if (off === 0) continue; const j = ((i + off) % n + n) % n; if (bornOrder[j] < 0) continue; const ddx = (posX[i] ?? 0) - (posX[j] ?? 0); const ddy = (posY[i] ?? 0) - (posY[j] ?? 0); candD2[count] = ddx * ddx + ddy * ddy; candDx[count] = ddx; candDy[count] = ddy; count++; } // partial selection: the NEIGHBOR_COUNT closest candidates by d2 let fx = 0; let fy = 0; for (let pick = 0; pick < NEIGHBOR_COUNT && pick < count; pick++) { let bestIdx = -1; let bestD2 = Infinity; for (let c = 0; c < count; c++) { const d2 = candD2[c] ?? Infinity; if (d2 < bestD2) { bestD2 = d2; bestIdx = c; } } if (bestIdx < 0) break; candD2[bestIdx] = Infinity; // consumed if (bestD2 < DESIRED_SPACING * DESIRED_SPACING) { const dist = Math.sqrt(bestD2) || 0.01; const overlap = (DESIRED_SPACING - dist) / DESIRED_SPACING; const mag = overlap * REPEL_STRENGTH; fx += ((candDx[bestIdx] ?? 0) / dist) * mag; fy += ((candDy[bestIdx] ?? 0) / dist) * mag; } } const fMag = Math.hypot(fx, fy); if (fMag > cap) { const s = cap / fMag; fx *= s; fy *= s; } dx[i] = fx; dy[i] = fy; } for (let slot = 0; slot < n; slot++) { if (bornOrder[slot] < 0) continue; ox[slot] = (ox[slot] ?? 0) + (dx[slot] ?? 0); oy[slot] = (oy[slot] ?? 0) + (dy[slot] ?? 0); posX[slot] = (posX[slot] ?? 0) + (dx[slot] ?? 0); posY[slot] = (posY[slot] ?? 0) + (dy[slot] ?? 0); } }; // `alpha` is the fraction of the way from the previous completed tick to // the latest one (0 right after a tick, approaching 1 just before the // next). alpha=1 means "render the latest tick's position outright" — // used by warmup and resize reprojection, which aren't running inside // the interpolated rAF loop. const applyToDOM = (alpha = 1) => { for (let slot = 0; slot < n; slot++) { const el = elRefs.current[slot]; if (!el) continue; if (bornOrder[slot] < 0) { el.style.opacity = "0"; continue; } const curX = posX[slot] ?? 0; const curY = posY[slot] ?? 0; let rx = curX; let ry = curY; // Only interpolate a floret that already existed at the previous // tick under this same slot — a just-spawned or just-recycled slot // has no meaningful "previous" position and must snap, not lerp in // from stale/garbage coordinates. if (alpha < 1 && prevBornOrder[slot] === bornOrder[slot]) { const px = prevPosX[slot] ?? curX; const py = prevPosY[slot] ?? curY; rx = px + (curX - px) * alpha; ry = py + (curY - py) * alpha; } const m = maturity[slot] ?? 0; const fadeIn = Math.min(1, m / BIRTH_FADE_FRAC); const fadeOut = m <= RIM_FADE_START ? 1 : Math.max(0, 1 - (m - RIM_FADE_START) / (1 - RIM_FADE_START)); const opacity = fadeIn * fadeOut; const scale = DOT_MIN_SCALE + (1 - DOT_MIN_SCALE) * fadeIn; el.style.transform = `translate3d(${rx.toFixed(1)}px, ${ry.toFixed(1)}px, 0) scale(${scale.toFixed(3)})`; el.style.opacity = opacity.toFixed(3); const colorIdx = m < 1 / 3 ? 0 : m < 2 / 3 ? 1 : 2; if (lastColorIdx[slot] !== colorIdx) { lastColorIdx[slot] = colorIdx; el.style.backgroundColor = stops[colorIdx] ?? stops[0] ?? ""; } } }; const recomputeGrowthK = () => { lifetimeMs = maxPrimordia * plastochron; growthK = Math.max(0.0001, (rRim * rRim - R0 * R0) / (2 * lifetimeMs)); }; const warmup = () => { const stepMs = plastochron / 4; const capScale = stepMs / TICK_MS; const ticks = Math.ceil((WARMUP_PLASTOCHRONS * plastochron) / stepMs); for (let i = 0; i < ticks; i++) stepPhysics(stepMs, capScale); applyToDOM(); }; const onThemeChange = () => { stops = readStops(); for (let i = 0; i < n; i++) lastColorIdx[i] = -1; applyToDOM(); }; const themeObserver = new MutationObserver(onThemeChange); const onResize = () => { const prevRim = rRim; measure(); if (!started) { trySetup(); return; } if (prevRim !== rRim) { // K stays fixed at its mount-time value on purpose — the live // population keeps advecting the same birth history toward the // new bounds instead of the field being re-sampled from a formula. // Reproject (not re-simulate) so the existing offsets/ages carry over. computePositions(); applyToDOM(); } }; const ro = new ResizeObserver(onResize); const frame = (now: number) => { // Fixed-timestep accumulator: leftover sub-tick time MUST carry over // frame to frame (acc lives in the outer closure, not reset here) — // rAF fires faster than TICK_MS at most refresh rates, so resetting // acc to dt every call discarded the remainder every time and this // loop advanced physics only on the rare frame-time hiccup. const dt = Math.min(200, lastT ? now - lastT : TICK_MS); lastT = now; acc += dt; while (acc >= TICK_MS) { // Snapshot the pre-step state as "previous" right before overwriting // it, so prevPos always trails posX/posY by exactly one tick even // when a laggy frame runs several catch-up ticks in a row. prevPosX.set(posX); prevPosY.set(posY); prevBornOrder.set(bornOrder); stepPhysics(TICK_MS, 1); acc -= TICK_MS; } applyToDOM(acc / TICK_MS); raf = requestAnimationFrame(frame); }; const onVisibility = () => { if (document.hidden) { if (raf) cancelAnimationFrame(raf); raf = 0; } else if (!reduced && started) { lastT = 0; raf = requestAnimationFrame(frame); } }; // reduced-motion still needs to keep visibly living — a single warmed-up // frame that never changes again for the life of the mount is a frozen // frame, not a calm one. Every REDUCED_PULSE_INTERVAL_MS it runs a short // discrete burst of physics ticks and repaints once (a slow, stepped // pulse of continued growth/advection, never a continuous per-frame rAF // sweep, which is what the vestibular guard actually targets). const REDUCED_PULSE_INTERVAL_MS = 2200; const REDUCED_PULSE_TICKS = 24; let reducedTimer = 0; const reducedPulse = () => { reducedTimer = 0; if (!reduced || document.hidden) { reducedTimer = window.setTimeout(reducedPulse, REDUCED_PULSE_INTERVAL_MS); return; } for (let i = 0; i < REDUCED_PULSE_TICKS; i++) stepPhysics(TICK_MS, 1); applyToDOM(); reducedTimer = window.setTimeout(reducedPulse, REDUCED_PULSE_INTERVAL_MS); }; function trySetup() { if (started) return; measure(); if (!w || !h) return; started = true; recomputeGrowthK(); warmup(); themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); if (!reduced) { document.addEventListener("visibilitychange", onVisibility); raf = requestAnimationFrame(frame); } else { reducedTimer = window.setTimeout(reducedPulse, REDUCED_PULSE_INTERVAL_MS); } } trySetup(); ro.observe(root); return () => { if (raf) cancelAnimationFrame(raf); if (reducedTimer) window.clearTimeout(reducedTimer); ro.disconnect(); themeObserver.disconnect(); document.removeEventListener("visibilitychange", onVisibility); }; }, [reduced, plastochron, maxPrimordia]); return (

{Array.from({ length: maxPrimordia }, (_, slot) => (

{ elRefs.current[slot] = el; }} className="will-change-transform absolute rounded-full" style={{ left: 0, top: 0, width: DOT_SIZE, height: DOT_SIZE, marginLeft: -DOT_SIZE / 2, marginTop: -DOT_SIZE / 2, opacity: 0, backgroundColor: "var(--ns-muted)", }} /> ))}

{children ? (

{/* the scrim hugs the copy — spread over the whole pane it washed the entire head out to a faint speckle in both themes */}

{children}

) : null}

); } 62:["$","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,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L64",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":["$","$L65",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"}]]}]]}],["$","$L66",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":["$","$L65",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"}]]}]]}],["$","$L66",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":["$","$L65",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)"}]]}]]}],["$","$L66",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L67",null,{"files":[{"path":"registry/core/floret-pack/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/floret-pack.tsx"}],"className":"h-[70svh] min-h-80"}]]}]