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:T7600,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // LaminaDome — stromatolites accreting upward from the bottom edge of the // pane. A heightfield of one column per ~2 css px grows by LIGHT-OCCLUSION // COMPETITION between neighbouring columns, not by summed sine bumps or a // noise field with stripes drawn on top. Every simulation tick, in order: // // 1. CLEARANCE — for each column x, cast K rays spanning a cone of // `coneHalfAngleDeg` on either side of the current light direction. // Each ray marches upward in fixed height steps; at each step the ray's // height is compared against whatever column its horizontal offset now // lands on. A neighbour tall enough to reach the ray height BLOCKS it — // the rest of that ray's steps don't count toward clearance. L[x] is // the fraction of ray-steps, averaged over all K rays, that stayed // unblocked: 1.0 for a column with open sky in the whole cone, lower // for one sitting in another column's shadow. // 2. DEPOSIT — h[x] += growthRate * L[x] * dt, then a fixed 0.2 // surface-tension blend with the two neighbours (below 0.1 the front // grows hairline single-column spikes; above 0.4 neighbouring domes // blur into one mound — 0.2 sits in the middle of that range and is not // exposed as a prop). A column whose growth stays capped low because a // taller neighbour keeps shading its cone falls further behind every // tick — that widening gap, not a fixed rule, is the coarsening: a few // tall columns keep winning L and pull away, many short ones measurably // stop accreting once they're buried in shadow. // // `coneHalfAngleDeg` is the one governing scalar and it alone traverses the // real morphospace: narrow (~10deg) tests only near-vertical sky, so a // column is shaded solely by whatever sits almost directly upslope of it — // most columns keep some clearance and the front stays columnar, many // similar-height ridges. Wide (~65deg) tests a broad hemisphere, so nearly // any taller neighbour anywhere nearby blocks you — only the true local // maxima stay lit, and the front coarsens hard into a few broad domes. // // LIGHT DIRECTION arcs slowly (LIGHT_BASE_DEG lean + a slow sine swing) — // domes accrete more on the side of their crest that keeps clearance toward // that lean, so they visibly lean the way real fossil stromatolite domes // lean toward palaeo-north. CREST DRIFT (see its own comment below, near // DRIFT_COLS_PER_S) is the separate term that makes peaks genuinely migrate // sideways rather than just lean in place: the whole accreted stack — the // live heightfield AND every committed lamina beneath it — is advected // sideways by whole columns at a steady rate, a lossless integer rotation // of the column arrays rather than a growth-rate modulation. SEA LEVEL is a // single scalar that chases the // field's mean height (slowly, so it stays relevant as the front grows) plus // a slow sine on top of that; a column below it gets its deposit multiplied // by DROWN_FACTOR — the front nearly stalls under a transgression and wakes // back up on the following regression, one line moving uniformly, not a // per-column rule. // // LAMINA COMMIT — every ~2s the current front polyline is pushed as a // banded stripe (a Float32Array snapshot of h[]). Capped at MAX_LAMINAE: // past that, the OLDEST TWO are averaged into one rather than the oldest // simply dropped — real compaction, and it bounds memory. The display scale // itself is `capPx / max(runningMaxHeight, capPx)`, computed fresh every // render from the tallest column's all-time raw height — so the tallest // dome is always pinned at capPx (40% of the pane) and everything below, // laminae included, compacts proportionally as the field keeps growing. // Growth in raw units never actually stops; only what's on screen saturates. // That base scale is then modulated +/-9% in lockstep with the same // sea-level sinusoid that already suppresses growth for a drowned column // (see PEAK BREATHING below), so the whole ridge — every peak and every // committed lamina under it — visibly rises and falls on screen even though // no column's raw height ever decreases. // // RENDER: canvas only, no DOM per-cell nodes. Band fill alternates two // colors mixed from --ns-muted and --foreground over --background (read via // getComputedStyle at mount and on a documentElement class mutation). A // thin sea-level line uses --border. Canvas is aria-hidden and // pointer-events:none — nothing here is interactive. prefers-reduced-motion // runs the tick function synchronously at mount until ~80 laminae exist, // then paints that one static banded field and never schedules a rAF. // --------------------------------------------------------------------------- const TICK_HZ = 12; // was 8 — a slower tick made the per-frame occlusion shift too small to read as travel, not just a smoothness issue const TICK_STEP = 1 / TICK_HZ; const MAX_TICKS_PER_FRAME = 6; const STEP_H = 3; // px per ray marching step const STEPS = 18; // -> 54px max occlusion reach const K_RAYS = 5; // samples across the cone const SURFACE_TENSION = 0.2; // fixed — see header comment on the 0.1/0.4 bounds // LIGHT DIRECTION is a single parallel-ray angle shared by every column, so // swinging it doesn't move a beam laterally across the field — what it does // is shift where each tall column's cast shadow lands, since a ray's // horizontal reach is `rise * tan(angle)`. As the angle rocks, that shadow // boundary next to every peak visibly slides sideways across its shorter // neighbours — a real, physically-grounded traveling occlusion edge, not a // decorative overlay. At the old 90s period that slide covered a few px // over a whole minute, invisible within the few seconds a card is judged // on; at 6s it completes most of a swing within one glance. const LIGHT_BASE_DEG = -18; // steady lean ("palaeo-north") const LIGHT_ARC_DEG = 22; // was 12 — bigger swing, bigger visible shadow travel const LIGHT_ARC_PERIOD_S = 6; // was 90 const MAX_LIGHT_DEG = 80; // clamp so tan() never blows up // CREST DRIFT — sixth pass, "i want the mountains to move on the x axis" // taken literally, after two prior attempts at this both failed. LIGHT_ARC // above swings the shadow-casting ANGLE, which slides the occlusion // boundary sideways next to an already-tall column but does nothing to // WHERE a column becomes tall in the first place — light-occlusion // coarsening is rich-get-richer (a column with any early lead keeps L close // to 1 and simply keeps winning at whatever angle the light currently // holds), so angle-swing alone locks winners in place permanently // (measured: ~10px jitter, ~0 net drift over a 3s sample). The FIFTH pass // tried a travelling favoured-growth-rate strip instead (boost near a // sweeping centre, throttle far from it): that produced real lateral // motion but the throttle floor (0.12x) suppressed deposit almost // everywhere almost always, so per-tick surface-tension diffusion (the // fixed 0.2 neighbour blend, unconditional every tick) had nothing to // fight and washed the ridge flat — variance and migration were sharing // one knob in opposite directions, and any throttle floor gentle enough // to keep the ridge alive turned out too gentle to make the crest hop // within a 3s glance either (measured across MIN_MULT 0.3-0.8: either the // ridge stayed flat or the crest didn't move inside 3s at all — no point // on that curve held both). // // CREST DRIFT instead makes the lateral motion a translation, not a growth // modulation: translating a heightfield preserves its peak-to-trough // variance exactly, by construction, so amplitude and migration stop // competing. Every tick, driftAcc accumulates DRIFT_COLS_PER_S * dt; once // it reaches a whole column, the ENTIRE column arrays — the live // heightfield h[] and every already-committed lamina snapshot — are // rotated sideways by exactly that many whole columns (wrapping at the // pane edge), never by a fractional/interpolated amount. An integer // rotation is lossless: it relabels which x each height belongs to without // resampling or blending any value, so it cannot itself inject or remove // silhouette variance the way even a small continuous shift with // interpolation would. Because the whole committed stack (not just the // live front) advects together, no band is ever left behind to poke // through a newer one — the ridge and its rock visibly travel together, // reading as one solid mass drifting, not the crest alone sliding across a // stationary base. At DRIFT_COLS_PER_S below, a full lap of a ~480px pane // (COL_WIDTH_BASE=2, so ~240 columns) takes ~20s, so it reads as // continuous one-direction travel — like a reef belt migrating along a // shoreline over geological time, compressed — never a back-and-forth // rock. Occlusion competition (CLEARANCE/DEPOSIT above) is completely // unmodified by this term: it is the sole source of height variance, exactly // as it was when the ridge was last accepted. const DRIFT_COLS_PER_S = 12; // ~24px/s at COL_WIDTH_BASE=2 — full lap of a 480px/240-col pane in ~20s const SEA_AMPL = 26; // raw height units // SEA_PERIOD_S is the actual driver of the columnar/domed silhouette, not // LIGHT_ARC_PERIOD_S: the drown/wake pulse is a single scalar shared by every // column, so it suppresses (DROWN_FACTOR) or restores each column's deposit // in lockstep with everyone else. When this period is close to (or a small // integer ratio of) the prewarm window, the suppression cycles average out // before a tall column can pull durably ahead of its neighbours — variance // injected by light-occlusion competition gets removed by the constant // per-tick surface-tension diffusion faster than growth can re-inject it, and // the front reads as flat. Measured on the sim harness (300 cols, 34-lamina // prewarm matching mount warmup, then converted to the actual ON-SCREEN // silhouette via this file's own `capPx/max(runningMax,capPx)` render scale, // since raw height-unit variance is not what the owner looks at — a taller // field compresses more, so raw variance alone overstates a fast-growth // config): 14 (the value this constant briefly held) -> ~0.01px, dead flat. // 55 (the pre-regression value, with the old slow growthRate/TICK_HZ) -> // ~32px. 28, paired with the now-fast LIGHT_ARC_PERIOD_S below, is not a // resonance point and -> ~30px across the neighbouring 26-40s band — matches // the pre-regression on-screen amplitude while running 2x faster, so the // drown/wake pulse itself stays legible within a card-scale glance. const SEA_PERIOD_S = 28; // was 14 (regression: flattened the ridge silhouette — see comment above), before that 55 const SEA_CHASE = 0.01; // per-tick lerp of sea center toward mean height const DROWN_FACTOR = 0.12; // PEAK BREATHING — the ridge silhouette used to only ever grow: once a // column pulled ahead in the light-occlusion competition it stayed pinned at // the top of the screen forever, because DEPOSIT never subtracts (raw height // is monotonic by construction — a stromatolite doesn't erode in this model) // and the OLD render used a scale that only tracked runningMax slowly. The // same transgression/regression cycle that already suppresses a drowned // column's growth (DROWN_FACTOR, above) is the physically-honest source for // visible peak motion too: as sea level rises toward a peak, less of its // height reads as "exposed dome" on screen; as it falls back, the peak reads // taller again. BREATHE_AMPL modulates the render scale itself (not the raw // heightfield) in lockstep with the exact same seaLevel sinusoid already // driving DROWN_FACTOR — so every peak, and the whole committed lamina // stack beneath it, visibly rises and falls together on the same cadence // that already governs whether growth is suppressed. It's deliberately a // uniform breathing of the whole ridge rather than per-peak independent // motion: light-occlusion competition changes WHICH columns win the raw // growth race (already modeled, already what makes lamina bands wavy from // column to column), and this reuses the sea cycle — the model's other // already-shared scalar — to also change how tall the WINNERS currently // read, rather than inventing an unrelated third oscillator. const BREATHE_AMPL = 0.09; // +/- fraction of display scale — tuned to read clearly within a 3s glance at SEA_PERIOD_S's cadence without looking like a zoom/pan of the canvas const COMMIT_INTERVAL_MS = 2000; const MAX_LAMINAE = 200; const CAP_FRACTION = 0.4; // front never displays past 40% of pane height const COL_WIDTH_BASE = 2; // 1 column per 2 css px, before the perf budget const MAX_COLS = 900; // Normal-motion mount warmup. Grows to a lamina count rather than a fixed tick // budget, same as the reduced path: a flat tick cap left the heightfield a // near-invisible sliver at the bottom edge on first paint (and in the resting // screenshot), which is the one state the piece is judged on. Both paths keep a // hard tick cap so a pathological prop can't hang the mount. const PREWARM_LAMINAE_TARGET = 34; const PREWARM_SAFETY_TICKS = 3000; const REDUCED_LAMINAE_TARGET = 80; const REDUCED_SAFETY_TICKS = 6000; // Reduced-motion still needs to keep visibly living, just without a // continuous rAF sweep: every REDUCED_LIVE_INTERVAL_MS it runs a short burst // of ticks (REDUCED_LIVE_TICKS at TICK_STEP each) and repaints once — a // slow, discrete pulse of growth rather than a frozen frame or a smooth // per-frame crawl. const REDUCED_LIVE_INTERVAL_MS = 2200; const REDUCED_LIVE_TICKS = 10; type RGB = [number, number, number]; function parseHex(raw: string): RGB | null { const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(raw.trim()); if (!m) return null; let h = m[1]; if (h.length === 3) h = h.split("").map((c) => c + c).join(""); const n = parseInt(h, 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; } function mixRGB(a: RGB, b: RGB, t: number): RGB { const k = t < 0 ? 0 : t > 1 ? 1 : t; return [ Math.round(a[0] + (b[0] - a[0]) * k), Math.round(a[1] + (b[1] - a[1]) * k), Math.round(a[2] + (b[2] - a[2]) * k), ]; } function rgbCss([r, g, b]: RGB, alpha = 1): string { return alpha >= 1 ? `rgb(${r},${g},${b})` : `rgba(${r},${g},${b},${alpha})`; } // xorshift32 — deterministic across mounts, so the shipped resting frame // (and the reduced-motion static frame) don't drift screenshot to screenshot function makeRng(seed: number) { let s = seed >>> 0 || 1; return () => { s ^= s << 13; s ^= s >>> 17; s ^= s << 5; return ((s >>> 0) % 1_000_000) / 1_000_000; }; } export interface LaminaDomeProps { /** Light-cone half-angle in degrees — the single governing scalar of the columnar-to-broad-domed morphospace. Narrow (~8-15) shades a column only from near-vertical neighbours, so the front stays columnar; wide (~55-70) tests a broad hemisphere, so only true local maxima stay lit and the front coarsens hard into a few broad domes. @default 30 */ coneHalfAngleDeg?: number; /** Deposition rate: height units/second for a fully unshaded column (clearance L=1). @default 10 */ growthRate?: number; /** Global simulation speed multiplier. @default 1 */ speed?: number; /** Freezes the front on its current frame without unmounting. */ paused?: boolean; /** Rendered over the plate in ordinary accessible DOM — this layer alone is aria-hidden. */ children?: React.ReactNode; className?: string; style?: React.CSSProperties; } export function LaminaDome({ coneHalfAngleDeg = 30, growthRate = 16, // was 10 — still read as "bigger" rather than "moving" at 10; the faster rise plus the sped-up light/sea cycles below make the front's travel legible within a card-scale glance speed = 1, paused = false, children, className = "", style, }: LaminaDomeProps) { const wrapRef = useRef(null); const canvasRef = useRef(null); const coneRef = useRef(coneHalfAngleDeg); coneRef.current = coneHalfAngleDeg; const growthRef = useRef(growthRate); growthRef.current = growthRate; const speedRef = useRef(speed); speedRef.current = speed; const pausedRef = useRef(paused); pausedRef.current = paused; useEffect(() => { const wrap = wrapRef.current; const canvas = canvasRef.current; if (!wrap || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); let reduced = mq.matches; let cssW = 0; let cssH = 0; let dpr = 1; let cols = 0; let colWidth = COL_WIDTH_BASE; let h = new Float32Array(0); let hNext = new Float32Array(0); let laminae: Float32Array[] = []; let rng = makeRng(0x51a1cb1e); let tAccum = 0; let sinceCommit = 0; let seaCenter = 0; let runningMax = 1; let driftAcc = 0; // fractional columns of CREST DRIFT owed, see header comment const rebuild = () => { if (cssW < 2 || cssH < 2) return; colWidth = COL_WIDTH_BASE; let c = Math.max(20, Math.ceil(cssW / colWidth)); while (c > MAX_COLS) { colWidth++; c = Math.max(20, Math.ceil(cssW / colWidth)); } cols = c; h = new Float32Array(cols); hNext = new Float32Array(cols); rng = makeRng(0x51a1cb1e); for (let i = 0; i < cols; i++) h[i] = rng() * 2; laminae = []; tAccum = 0; sinceCommit = 0; seaCenter = 1; runningMax = 1; driftAcc = 0; const warm = reduced ? REDUCED_SAFETY_TICKS : PREWARM_SAFETY_TICKS; const laminaeTarget = reduced ? REDUCED_LAMINAE_TARGET : PREWARM_LAMINAE_TARGET; let ticks = 0; while (ticks < warm) { tick(TICK_STEP); ticks++; if (laminae.length >= laminaeTarget) break; } render(); }; // --- simulation ------------------------------------------------------- const tanCache = new Float32Array(K_RAYS); // CREST DRIFT — see header comment above. A lossless integer rotation: // every value simply moves to its neighbour's slot, wrapping at the // edge, so it can't itself inject or remove silhouette variance the way // even a small interpolated shift would. const rotateColumnsRight = (arr: Float32Array) => { if (cols < 2) return; const last = arr[cols - 1]!; for (let i = cols - 1; i > 0; i--) arr[i] = arr[i - 1]!; arr[0] = last; }; const tick = (dt: number) => { tAccum += dt; let lightDeg = LIGHT_BASE_DEG + LIGHT_ARC_DEG * Math.sin((tAccum / LIGHT_ARC_PERIOD_S) * Math.PI * 2); lightDeg = Math.max(-MAX_LIGHT_DEG, Math.min(MAX_LIGHT_DEG, lightDeg)); const lightRad = (lightDeg * Math.PI) / 180; const halfRad = (Math.max(5, Math.min(70, coneRef.current)) * Math.PI) / 180; for (let k = 0; k < K_RAYS; k++) { const off = (k / (K_RAYS - 1)) * 2 - 1; // -1..1, K_RAYS is fixed > 1 const a = Math.max(-MAX_LIGHT_DEG * (Math.PI / 180), Math.min(MAX_LIGHT_DEG * (Math.PI / 180), lightRad + off * halfRad)); tanCache[k] = Math.tan(a); } let meanH = 0; for (let i = 0; i < cols; i++) meanH += h[i]!; meanH /= Math.max(1, cols); seaCenter += (meanH - seaCenter) * SEA_CHASE; const seaLevel = seaCenter + SEA_AMPL * Math.sin((tAccum / SEA_PERIOD_S) * Math.PI * 2); const g = Math.max(0, growthRef.current); for (let x = 0; x < cols; x++) { const base = h[x]!; let clearSum = 0; for (let k = 0; k < K_RAYS; k++) { const tanA = tanCache[k]!; let clear = 0; for (let s = 1; s <= STEPS; s++) { const rise = s * STEP_H; const nx = x + Math.round((rise * tanA) / colWidth); if (nx < 0 || nx >= cols) { clear++; continue; } if (h[nx]! >= base + rise) break; clear++; } clearSum += clear / STEPS; } const L = clearSum / K_RAYS; const drowned = base < seaLevel; const deposit = g * L * dt * (drowned ? DROWN_FACTOR : 1); hNext[x] = base + deposit; } // surface tension: 0.2 blend with clamped neighbours for (let x = 0; x < cols; x++) { const l = x > 0 ? hNext[x - 1]! : hNext[x]!; const r = x < cols - 1 ? hNext[x + 1]! : hNext[x]!; h[x] = hNext[x]! * (1 - 2 * SURFACE_TENSION) + SURFACE_TENSION * (l + r); } // CREST DRIFT — translate the whole accreted stack sideways by whole // columns only (see rotateColumnsRight above and the header comment). // Every already-committed lamina moves with the live front so the // ridge and its rock read as one solid mass travelling together. driftAcc += DRIFT_COLS_PER_S * dt; while (driftAcc >= 1) { driftAcc -= 1; rotateColumnsRight(h); for (let li = 0; li < laminae.length; li++) rotateColumnsRight(laminae[li]!); } for (let x = 0; x < cols; x++) if (h[x]! > runningMax) runningMax = h[x]!; sinceCommit += dt * 1000; if (sinceCommit >= COMMIT_INTERVAL_MS) { sinceCommit = 0; laminae.push(h.slice()); if (laminae.length > MAX_LAMINAE) { const merged = new Float32Array(cols); const a = laminae[0]!; const b = laminae[1]!; for (let i = 0; i < cols; i++) merged[i] = (a[i]! + b[i]!) * 0.5; laminae.splice(0, 2, merged); } } }; // --- palette ------------------------------------------------------------ let background: RGB = [255, 255, 255]; let muted: RGB = [77, 77, 77]; let foreground: RGB = [23, 23, 23]; let border: RGB = [235, 235, 235]; let bandA = "rgb(120,120,120)"; let bandB = "rgb(150,150,150)"; let seaStroke = "rgba(120,120,120,0.5)"; const readColors = () => { const cs = getComputedStyle(document.documentElement); background = parseHex(cs.getPropertyValue("--background")) ?? background; muted = parseHex(cs.getPropertyValue("--ns-muted")) ?? muted; foreground = parseHex(cs.getPropertyValue("--foreground")) ?? foreground; border = parseHex(cs.getPropertyValue("--border")) ?? border; bandA = rgbCss(mixRGB(background, muted, 0.5)); bandB = rgbCss(mixRGB(background, foreground, 0.14)); seaStroke = rgbCss(mixRGB(background, border, 0.9), 0.7); }; readColors(); // --- render --------------------------------------------------------- const render = () => { if (cols <= 0 || cssW < 2 || cssH < 2) return; ctx.clearRect(0, 0, cssW, cssH); const capPx = cssH * CAP_FRACTION; const baseScale = capPx / Math.max(runningMax, capPx); // Same phase as the sea-level sinusoid driving DROWN_FACTOR (see the // PEAK BREATHING comment above) — computed fresh every render, not // cached, so it stays exactly in lockstep with tAccum even across a // resize-triggered extra render. const breathe = 1 + BREATHE_AMPL * Math.sin((tAccum / SEA_PERIOD_S) * Math.PI * 2); const scale = baseScale * breathe; const baselineY = cssH; const xAt = (i: number) => i * colWidth; const yAt = (height: number) => baselineY - height * scale; const bands = [...laminae, h]; let prevTop: Float32Array | null = null; for (let bi = 0; bi < bands.length; bi++) { const top = bands[bi]!; ctx.beginPath(); ctx.moveTo(0, yAt(prevTop ? prevTop[0]! : 0)); if (prevTop) { for (let i = 1; i < cols; i++) ctx.lineTo(xAt(i), yAt(prevTop[i]!)); } else { ctx.lineTo(xAt(cols - 1), yAt(0)); } for (let i = cols - 1; i >= 0; i--) ctx.lineTo(xAt(i), yAt(top[i]!)); ctx.closePath(); ctx.fillStyle = bi % 2 === 0 ? bandA : bandB; ctx.fill(); prevTop = top; } // sea level line const capPxUnits = capPx / Math.max(scale, 1e-6); const seaLevel = seaCenter + SEA_AMPL * Math.sin((tAccum / SEA_PERIOD_S) * Math.PI * 2); if (seaLevel > 0 && seaLevel < capPxUnits * 1.4) { const y = yAt(seaLevel); if (y > 0 && y < cssH) { ctx.strokeStyle = seaStroke; ctx.lineWidth = 1; ctx.setLineDash([5, 4]); ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(cssW, y); ctx.stroke(); ctx.setLineDash([]); } } }; // --- sizing ----------------------------------------------------------- const applyBacking = () => { dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = Math.max(1, Math.round(cssW * dpr)); canvas.height = Math.max(1, Math.round(cssH * dpr)); canvas.style.width = `${cssW}px`; canvas.style.height = `${cssH}px`; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }; let rebuildTimer = 0; const resize = () => { const rect = wrap.getBoundingClientRect(); if (rect.width < 2 || rect.height < 2) return; const widthChanged = Math.abs(rect.width - cssW) > 0.5; cssW = rect.width; cssH = rect.height; applyBacking(); if (widthChanged) { if (cols === 0) { rebuild(); } else { window.clearTimeout(rebuildTimer); rebuildTimer = window.setTimeout(rebuild, 260); } } else { render(); } }; // --- loop --------------------------------------------------------------- let raf = 0; let last = 0; let acc = 0; let visible = true; // "paused" (explicit prop) always means a hard freeze. "reduced" no // longer means that: a single static frame that never changes again for // the life of the mount reads as broken, not calm, to anyone who lingers // on it — so reduced motion instead advances the front in slow, discrete // pulses on a plain timeout (never rAF, so there is no continuous // per-frame camera-like motion, which is what the vestibular guard is // actually protecting against) rather than freezing it outright. let reducedTimer = 0; const loop = (now: number) => { const dt = last === 0 ? 1 / 60 : Math.min(0.1, (now - last) / 1000); last = now; acc += dt * Math.max(0, speedRef.current); let ran = 0; while (acc >= TICK_STEP && ran < MAX_TICKS_PER_FRAME) { tick(TICK_STEP); acc -= TICK_STEP; ran++; } if (ran > 0) render(); if (visible && !document.hidden && !reduced && !pausedRef.current) { raf = requestAnimationFrame(loop); } else { raf = 0; } }; const wake = () => { if (raf || reduced || pausedRef.current || !visible || document.hidden) return; last = 0; raf = requestAnimationFrame(loop); }; const sleep = () => { if (raf) cancelAnimationFrame(raf); raf = 0; }; const reducedPulse = () => { reducedTimer = 0; for (let i = 0; i < REDUCED_LIVE_TICKS; i++) tick(TICK_STEP); render(); wakeReduced(); }; const wakeReduced = () => { if (reducedTimer || !reduced || pausedRef.current || !visible || document.hidden) return; reducedTimer = window.setTimeout(reducedPulse, REDUCED_LIVE_INTERVAL_MS); }; const sleepReduced = () => { if (reducedTimer) window.clearTimeout(reducedTimer); reducedTimer = 0; }; const ro = new ResizeObserver(resize); ro.observe(wrap); resize(); const io = new IntersectionObserver( (entries) => { visible = entries.some((e) => e.isIntersecting); if (visible) { wake(); wakeReduced(); } else { sleep(); sleepReduced(); } }, { threshold: 0 } ); io.observe(wrap); const onVis = () => { if (document.hidden) { sleep(); sleepReduced(); } else { wake(); wakeReduced(); } }; document.addEventListener("visibilitychange", onVis); const applyMode = () => { if (pausedRef.current) { sleep(); sleepReduced(); } else if (reduced) { sleep(); wakeReduced(); } else { sleepReduced(); wake(); } }; const onMq = () => { reduced = mq.matches; applyMode(); }; mq.addEventListener("change", onMq); let lastPolledPaused = pausedRef.current; let poll = 0; const pollPaused = () => { if (pausedRef.current !== lastPolledPaused) { lastPolledPaused = pausedRef.current; applyMode(); } poll = window.setTimeout(pollPaused, 150); }; pollPaused(); const themeObserver = new MutationObserver(() => { readColors(); render(); }); themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); applyMode(); return () => { sleep(); sleepReduced(); ro.disconnect(); io.disconnect(); themeObserver.disconnect(); mq.removeEventListener("change", onMq); document.removeEventListener("visibilitychange", onVis); window.clearTimeout(rebuildTimer); window.clearTimeout(poll); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (

); } LaminaDome.displayName = "LaminaDome"; 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/loud/lamina-dome/component.tsx","content":"$68","type":"registry:ui","target":"components/ui/lamina-dome.tsx"}],"className":"h-[70svh] min-h-80"}]]}]