63: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"] 64:T6ae7,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // MurmurShear — a dusk murmuration hero. ~1500 starlings run true separation / // alignment / cohesion over their 7 NEAREST NEIGHBOURS BY COUNT (topological, // Ballerini/STARFLAG — not a metric radius), on a fixed 30Hz physics tick // decoupled from display refresh via an accumulator, neighbours resolved // through a spatial hash sized to the container so a bird almost always // resolves in its own cell and only expands outward (up to 5 rings) when // locally sparse. Separation 1.5 vs cohesion 1.0 keeps the flock from // clump-collapsing. // // On a slow clock (H = passesPerMinute, the governing scalar) an invisible // falcon flies one straight chord through the field. Birds it directly // crosses get an immediate escape turn + speed kick. That escape state // (alarm 0..1, signed turn direction) is NOT broadcast flock-wide — each bird // samples its own 7 neighbours' alarm only once every 90ms (a per-bird // latency accumulator) and adopts gain 2.2 x the neighbour average if that // exceeds its own decaying value. The 90ms hop is what makes the escape read // as a travelling band shearing across the flock rather than a synchronized // flinch: hop distance / 90ms is faster than the flock's own cruise speed. // H=0 disables the falcon entirely — alarm can never be seeded, so the wave // mechanism structurally cannot fire; what's left is plain murmuration. // // Render: solid --background fill, then a low-res leaky-integrator density // grid (raw bird count + a heavier alarm-weighted term, so a real spatial // knot forms where escaping birds bank together) quantized to five alpha // stops of --foreground and upscaled via a tiny offscreen canvas, then every // bird as a 2-3px velocity-aligned streak (agitated birds drawn slightly // bolder). All ink read via getComputedStyle at mount and re-read on a // documentElement class MutationObserver. // // prefers-reduced-motion: no rAF ever starts. A silent physics-only warmup // (with one falcon pass forced in, unless H=0) runs once, then a short // low-alpha accumulation window is actually drawn without clearing between // steps to build one precomputed long-exposure still, sealed with a final // density wash. This is a genuinely different artifact from the live loop, // not the live loop merely slowed down. // // Purely decorative: aria-hidden, pointer-events-none, no controls, no // pointer handling at all — the flock is self-driving on its own clock. // --------------------------------------------------------------------------- export interface MurmurShearProps { /** number of starlings simulated; clamped to [50, 4000] */ birdCount?: number; /** governing scalar H — invisible falcon passes per minute. 0 = pure murmuration, no waves. */ passesPerMinute?: number; /** content overlaid on the field (caller supplies its own bg-background/70 scrim) */ children?: React.ReactNode; /** extra classes merged onto the rendered root element */ className?: string; } const K_NEIGHBORS = 7; const MAX_RING = 5; const SEP_WEIGHT = 1.5; const ALIGN_WEIGHT = 1.0; const COH_WEIGHT = 1.0; const SEP_SCALE = 5500; const ALIGN_SCALE = 1.8; const COH_SCALE = 9; const MAX_STEER_ACCEL = 260; // px/s^2, caps sep+align+coh before escape/wall are added const MAX_TOTAL_ACCEL = 1500; // px/s^2, final safety clamp const CRUISE_MAX_SPEED = 150; // px/s const MIN_SPEED = 55; // px/s const ESCAPE_SPEED_BONUS = 75; // px/s, agitated birds may cruise faster const WALL_MARGIN_FRAC = 0.09; const WALL_ACCEL = 340; const JITTER_ACCEL = 16; const ESCAPE_GAIN = 2.2; // wave response gain applied once per 90ms hop const PROP_LATENCY = 0.09; // s — neighbour-to-neighbour latency const ALARM_DECAY_TAU = 1.3; // s const ESCAPE_TURN_ACCEL = 900; // px/s^2 lateral accel at alarm = 1 const FALCON_STRIKE_R = 68; // px const FALCON_SPEED = 1050; // px/s const FALCON_MARGIN = 90; // px beyond bounds for entry/exit const FALCON_KICK = 480; // px/s instantaneous radial speed kick on direct hit const DENSITY_CELL = 22; // px, css space const DENSITY_DECAY = 0.86; const DENSITY_ALARM_WEIGHT = 3.2; const STOP_ALPHAS = [0, 0.1, 0.2, 0.34, 0.52]; // five stops toward --foreground const STREAK_LEN = 2.8; // px const FIXED_DT = 1 / 30; // fixed 30Hz physics tick const MAX_STEPS_PER_FRAME = 4; function parseHex(raw: string): [number, number, number] | 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]; } export function MurmurShear({ birdCount = 1500, passesPerMinute = 5, children, className = "", }: MurmurShearProps) { const containerRef = useRef(null); const canvasRef = useRef(null); const N = Math.max(50, Math.min(4000, Math.round(birdCount))); const H = Math.max(0, passesPerMinute); useEffect(() => { const container = containerRef.current; const canvas = canvasRef.current; if (!container || !canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; let w = 0; let h = 0; let raf = 0; let running = false; let last = 0; let physAccum = 0; let seeded = false; // ---- ink, read from tokens; re-read on theme flip --------------------- let fgStyle = "#888"; let bgStyle = "#0a0a0a"; let fgRgb: [number, number, number] = [136, 136, 136]; const readInk = () => { const cs = getComputedStyle(document.documentElement); const fg = cs.getPropertyValue("--foreground").trim(); const bg = cs.getPropertyValue("--background").trim(); fgStyle = fg || "#888"; bgStyle = bg || "#0a0a0a"; fgRgb = parseHex(fg) ?? [136, 136, 136]; }; readInk(); // ---- bird state: typed arrays, mutated in place ------------------------ const px = new Float32Array(N); const py = new Float32Array(N); const vx = new Float32Array(N); const vy = new Float32Array(N); const ax = new Float32Array(N); const ay = new Float32Array(N); const alarm = new Float32Array(N); const turnSign = new Float32Array(N); const propAccum = new Float32Array(N); const prevAlarm = new Float32Array(N); const prevTurnSign = new Float32Array(N); // ---- spatial hash (neighbour search), rebuilt per resize -------------- let hashCell = 40; let gridCols = 1; let gridRows = 1; let buckets: number[][] = []; const nnIdx = new Int32Array(K_NEIGHBORS); const nnDist2 = new Float32Array(K_NEIGHBORS); let cand: number[] = []; const rebuildGridDims = () => { hashCell = Math.max(20, Math.min(140, Math.sqrt((10 * w * h) / N) || 40)); gridCols = Math.max(1, Math.ceil(w / hashCell)); gridRows = Math.max(1, Math.ceil(h / hashCell)); buckets = new Array(gridCols * gridRows); for (let i = 0; i < buckets.length; i++) buckets[i] = []; }; const rebuildBuckets = () => { for (let i = 0; i < buckets.length; i++) buckets[i].length = 0; for (let i = 0; i < N; i++) { let cx = Math.floor(px[i] / hashCell); let cy = Math.floor(py[i] / hashCell); if (cx < 0) cx = 0; else if (cx >= gridCols) cx = gridCols - 1; if (cy < 0) cy = 0; else if (cy >= gridRows) cy = gridRows - 1; buckets[cy * gridCols + cx].push(i); } }; // finds up to K_NEIGHBORS nearest (topological — nearest by count, not a // metric cutoff), expanding the search ring until enough candidates are // seen. Returns the count found (0..K_NEIGHBORS). const findNeighbors = (i: number): number => { const xi = px[i]; const yi = py[i]; let cx = Math.floor(xi / hashCell); let cy = Math.floor(yi / hashCell); if (cx < 0) cx = 0; else if (cx >= gridCols) cx = gridCols - 1; if (cy < 0) cy = 0; else if (cy >= gridRows) cy = gridRows - 1; let ring = 0; cand.length = 0; for (;;) { cand.length = 0; const x0 = Math.max(0, cx - ring); const x1 = Math.min(gridCols - 1, cx + ring); const y0 = Math.max(0, cy - ring); const y1 = Math.min(gridRows - 1, cy + ring); for (let gy = y0; gy <= y1; gy++) { const rowBase = gy * gridCols; for (let gx = x0; gx <= x1; gx++) { const bucket = buckets[rowBase + gx]; for (let k = 0; k < bucket.length; k++) { const j = bucket[k]; if (j !== i) cand.push(j); } } } const fullyCovered = x0 === 0 && y0 === 0 && x1 === gridCols - 1 && y1 === gridRows - 1; if (cand.length >= K_NEIGHBORS || ring >= MAX_RING || fullyCovered) break; ring++; } let count = 0; for (let c = 0; c < cand.length; c++) { const j = cand[c]; const dx = px[j] - xi; const dy = py[j] - yi; const d2 = dx * dx + dy * dy; if (count < K_NEIGHBORS) { // insertion into the sorted top-k let p = count; while (p > 0 && nnDist2[p - 1] > d2) { nnDist2[p] = nnDist2[p - 1]; nnIdx[p] = nnIdx[p - 1]; p--; } nnDist2[p] = d2; nnIdx[p] = j; count++; } else if (d2 < nnDist2[K_NEIGHBORS - 1]) { let p = K_NEIGHBORS - 1; while (p > 0 && nnDist2[p - 1] > d2) { nnDist2[p] = nnDist2[p - 1]; nnIdx[p] = nnIdx[p - 1]; p--; } nnDist2[p] = d2; nnIdx[p] = j; } } return count; }; // ---- density field: low-res leaky integrator, upscaled via canvas ----- let densCols = 1; let densRows = 1; let density = new Float32Array(1); let alarmDensity = new Float32Array(1); let densThresh: [number, number, number, number] = [1, 2, 3, 4]; const washCanvas = document.createElement("canvas"); const washCtx = washCanvas.getContext("2d"); let washImg: ImageData | null = null; const rebuildDensityGrid = () => { densCols = Math.max(1, Math.ceil(w / DENSITY_CELL)); densRows = Math.max(1, Math.ceil(h / DENSITY_CELL)); density = new Float32Array(densCols * densRows); alarmDensity = new Float32Array(densCols * densRows); // density[] is a leaky integrator (*= DENSITY_DECAY, += 1/bird/tick), so // its steady-state value is the instantaneous per-tick count scaled by // the integrator's DC gain 1/(1-decay) — thresholds must be calibrated // against THAT, not the raw instantaneous average, or nearly every // occupied cell saturates past the top stop within ~1s and the whole // flock reads as one uniform blob instead of graded knots. const instBaseline = N / (densCols * densRows); const steadyBaseline = instBaseline / (1 - DENSITY_DECAY); densThresh = [ steadyBaseline * 0.6, steadyBaseline * 1.3, steadyBaseline * 2.2, steadyBaseline * 3.4, ]; washCanvas.width = densCols; washCanvas.height = densRows; washImg = washCtx ? washCtx.createImageData(densCols, densRows) : null; }; // ---- falcon: one straight chord per pass, invisible, never drawn ------ let falconActive = false; let falconT = 0; let falconDur = 0; let fx0 = 0; let fy0 = 0; let fx1 = 0; let fy1 = 0; let fpx = 0; let fpy = 0; let nextPassIn = H > 0 ? 3 : Infinity; const scheduleNextPass = () => { if (H <= 0) { nextPassIn = Infinity; return; } const base = 60 / H; nextPassIn = base * (0.7 + Math.random() * 0.6); }; const startFalconPass = () => { const angle = ((Math.random() * 40 - 20) * Math.PI) / 180; const reverse = Math.random() < 0.5; const yMid = h * (0.28 + Math.random() * 0.44); const span = w + FALCON_MARGIN * 2; const dy = Math.tan(angle) * span; if (!reverse) { fx0 = -FALCON_MARGIN; fy0 = yMid - dy / 2; fx1 = w + FALCON_MARGIN; fy1 = yMid + dy / 2; } else { fx0 = w + FALCON_MARGIN; fy0 = yMid - dy / 2; fx1 = -FALCON_MARGIN; fy1 = yMid + dy / 2; } const dist = Math.hypot(fx1 - fx0, fy1 - fy0); falconDur = Math.max(0.1, dist / FALCON_SPEED); falconT = 0; fpx = fx0; fpy = fy0; falconActive = true; }; // closest point on segment [ax,ay]-[bx,by] to point [px0,py0] const closestOnSegment = (ax0: number, ay0: number, bx0: number, by0: number, px0: number, py0: number) => { const sx = bx0 - ax0; const sy = by0 - ay0; const len2 = sx * sx + sy * sy; let t = len2 > 1e-6 ? ((px0 - ax0) * sx + (py0 - ay0) * sy) / len2 : 0; if (t < 0) t = 0; else if (t > 1) t = 1; return [ax0 + sx * t, ay0 + sy * t] as const; }; // ---- one fixed-timestep physics tick ----------------------------------- const stepPhysics = (dt: number, nowS: number) => { prevAlarm.set(alarm); prevTurnSign.set(turnSign); // falcon: advance / trigger if (H > 0) { if (!falconActive) { nextPassIn -= dt; if (nextPassIn <= 0) startFalconPass(); } if (falconActive) { const prevX = fpx; const prevY = fpy; falconT += dt / falconDur; const t = Math.min(1, falconT); const curX = fx0 + (fx1 - fx0) * t; const curY = fy0 + (fy1 - fy0) * t; const fdx = curX - prevX; const fdy = curY - prevY; for (let i = 0; i < N; i++) { const [cxp, cyp] = closestOnSegment(prevX, prevY, curX, curY, px[i], py[i]); const ddx = px[i] - cxp; const ddy = py[i] - cyp; const dist = Math.sqrt(ddx * ddx + ddy * ddy); if (dist < FALCON_STRIKE_R) { const inv = dist > 1e-4 ? 1 / dist : 0; const awayX = ddx * inv; const awayY = ddy * inv; const kick = FALCON_KICK * (1 - dist / FALCON_STRIKE_R); vx[i] += awayX * kick; vy[i] += awayY * kick; alarm[i] = 1; const cross = fdx * awayY - fdy * awayX; turnSign[i] = cross >= 0 ? 1 : -1; } } fpx = curX; fpy = curY; if (falconT >= 1) { falconActive = false; scheduleNextPass(); } } } rebuildBuckets(); const wallMargin = Math.min(w, h) * WALL_MARGIN_FRAC; // Pass A: neighbours, boid forces, alarm propagation, escape steering for (let i = 0; i < N; i++) { const count = findNeighbors(i); let accX = 0; let accY = 0; if (count > 0) { let sepX = 0; let sepY = 0; let sumVx = 0; let sumVy = 0; let sumPx = 0; let sumPy = 0; for (let k = 0; k < count; k++) { const j = nnIdx[k]; const dx = px[i] - px[j]; const dy = py[i] - py[j]; let d2 = dx * dx + dy * dy; if (d2 < 1e-4) d2 = 1e-4; const invd = 1 / d2; sepX += dx * invd; sepY += dy * invd; sumVx += vx[j]; sumVy += vy[j]; sumPx += px[j]; sumPy += py[j]; } const inv = 1 / count; accX += sepX * inv * SEP_SCALE * SEP_WEIGHT; accY += sepY * inv * SEP_SCALE * SEP_WEIGHT; accX += (sumVx * inv - vx[i]) * ALIGN_SCALE * ALIGN_WEIGHT; accY += (sumVy * inv - vy[i]) * ALIGN_SCALE * ALIGN_WEIGHT; accX += (sumPx * inv - px[i]) * COH_SCALE * COH_WEIGHT; accY += (sumPy * inv - py[i]) * COH_SCALE * COH_WEIGHT; } // clamp the flocking contribution before escape/wall are layered on const flockMag = Math.hypot(accX, accY); if (flockMag > MAX_STEER_ACCEL) { const s = MAX_STEER_ACCEL / flockMag; accX *= s; accY *= s; } // soft walls if (px[i] < wallMargin) accX += WALL_ACCEL * (wallMargin - px[i]) / wallMargin; else if (px[i] > w - wallMargin) accX -= (WALL_ACCEL * (wallMargin - (w - px[i]))) / wallMargin; if (py[i] < wallMargin) accY += WALL_ACCEL * (wallMargin - py[i]) / wallMargin; else if (py[i] > h - wallMargin) accY -= (WALL_ACCEL * (wallMargin - (h - py[i]))) / wallMargin; // ambient jitter, organic texture accX += (Math.random() - 0.5) * JITTER_ACCEL; accY += (Math.random() - 0.5) * JITTER_ACCEL; // alarm: decay, then at most once per 90ms sample the (pre-frame) // neighbour snapshot and adopt gain x average if it exceeds decay alarm[i] *= Math.exp(-dt / ALARM_DECAY_TAU); propAccum[i] += dt; if (propAccum[i] >= PROP_LATENCY) { propAccum[i] -= PROP_LATENCY; if (propAccum[i] > PROP_LATENCY) propAccum[i] = PROP_LATENCY; if (count > 0) { let sumA = 0; let sumSigned = 0; for (let k = 0; k < count; k++) { const j = nnIdx[k]; sumA += prevAlarm[j]; sumSigned += prevAlarm[j] * prevTurnSign[j]; } const avgA = sumA / count; const proposed = Math.min(1, avgA * ESCAPE_GAIN); if (proposed > alarm[i]) { alarm[i] = proposed; turnSign[i] = sumSigned >= 0 ? 1 : -1; } } } // escape steering: lateral accel perpendicular to heading, signed const speedNow = Math.hypot(vx[i], vy[i]) || 1; const perpX = -vy[i] / speedNow; const perpY = vx[i] / speedNow; accX += perpX * turnSign[i] * alarm[i] * ESCAPE_TURN_ACCEL; accY += perpY * turnSign[i] * alarm[i] * ESCAPE_TURN_ACCEL; const totalMag = Math.hypot(accX, accY); if (totalMag > MAX_TOTAL_ACCEL) { const s = MAX_TOTAL_ACCEL / totalMag; accX *= s; accY *= s; } ax[i] = accX; ay[i] = accY; } // decay density grid once per tick for (let c = 0; c < density.length; c++) { density[c] *= DENSITY_DECAY; alarmDensity[c] *= DENSITY_DECAY; } // Pass B: integrate, clamp speed, accumulate density for (let i = 0; i < N; i++) { vx[i] += ax[i] * dt; vy[i] += ay[i] * dt; const maxSpeed = CRUISE_MAX_SPEED + alarm[i] * ESCAPE_SPEED_BONUS; const sp = Math.hypot(vx[i], vy[i]); if (sp > maxSpeed) { const s = maxSpeed / (sp || 1); vx[i] *= s; vy[i] *= s; } else if (sp < MIN_SPEED) { const s = MIN_SPEED / (sp || 1); vx[i] *= s; vy[i] *= s; } let nx = px[i] + vx[i] * dt; let ny = py[i] + vy[i] * dt; // hard clamp at the true canvas bound (soft walls should already have // turned birds back well before this); zero the outward component so // a fast-escaping bird can't pin here and re-stamp one density cell // every tick, which would paint a bright rim line at the edge if (nx < 0) { nx = 0; if (vx[i] < 0) vx[i] = 0; } else if (nx > w) { nx = w; if (vx[i] > 0) vx[i] = 0; } if (ny < 0) { ny = 0; if (vy[i] < 0) vy[i] = 0; } else if (ny > h) { ny = h; if (vy[i] > 0) vy[i] = 0; } px[i] = nx; py[i] = ny; let cx = Math.floor(nx / DENSITY_CELL); let cy = Math.floor(ny / DENSITY_CELL); if (cx < 0) cx = 0; else if (cx >= densCols) cx = densCols - 1; if (cy < 0) cy = 0; else if (cy >= densRows) cy = densRows - 1; const idx = cy * densCols + cx; density[idx] += 1; alarmDensity[idx] += alarm[i]; } void nowS; }; // ---- rendering ---------------------------------------------------------- const clearBg = () => { ctx.fillStyle = bgStyle; ctx.fillRect(0, 0, w, h); }; const drawWash = () => { if (!washCtx || !washImg) return; const buf = washImg.data; const [r, g, b] = fgRgb; for (let c = 0; c < density.length; c++) { const val = density[c] + alarmDensity[c] * DENSITY_ALARM_WEIGHT; let stop = 0; if (val >= densThresh[3]) stop = 4; else if (val >= densThresh[2]) stop = 3; else if (val >= densThresh[1]) stop = 2; else if (val >= densThresh[0]) stop = 1; const o = c * 4; buf[o] = r; buf[o + 1] = g; buf[o + 2] = b; buf[o + 3] = Math.round(STOP_ALPHAS[stop] * 255); } washCtx.putImageData(washImg, 0, 0); ctx.imageSmoothingEnabled = true; ctx.drawImage(washCanvas, 0, 0, densCols, densRows, 0, 0, w, h); }; const drawStreaks = (calmAlpha: number, agitatedAlphaBase: number) => { ctx.strokeStyle = fgStyle; ctx.lineWidth = 1.3; ctx.globalAlpha = calmAlpha; ctx.beginPath(); for (let i = 0; i < N; i++) { if (alarm[i] >= 0.15) continue; const sp = Math.hypot(vx[i], vy[i]) || 1; const dx = (vx[i] / sp) * STREAK_LEN; const dy = (vy[i] / sp) * STREAK_LEN; ctx.moveTo(px[i] - dx, py[i] - dy); ctx.lineTo(px[i], py[i]); } ctx.stroke(); ctx.globalAlpha = 1; ctx.beginPath(); let any = false; for (let i = 0; i < N; i++) { if (alarm[i] < 0.15) continue; any = true; const sp = Math.hypot(vx[i], vy[i]) || 1; const dx = (vx[i] / sp) * STREAK_LEN * (1 + alarm[i] * 0.4); const dy = (vy[i] / sp) * STREAK_LEN * (1 + alarm[i] * 0.4); ctx.moveTo(px[i] - dx, py[i] - dy); ctx.lineTo(px[i], py[i]); } if (any) { ctx.lineWidth = 1.7; ctx.globalAlpha = Math.min(0.92, agitatedAlphaBase + 0.35); ctx.stroke(); } ctx.globalAlpha = 1; }; const renderFrame = () => { clearBg(); drawWash(); drawStreaks(0.5, 0.5); }; // ---- main loop: fixed 30Hz physics, render once per rAF --------------- const loop = (t: number) => { const rawDt = Math.min((t - (last || t)) / 1000, 0.25); last = t; physAccum += rawDt; let steps = 0; while (physAccum >= FIXED_DT && steps < MAX_STEPS_PER_FRAME) { stepPhysics(FIXED_DT, t / 1000); physAccum -= FIXED_DT; steps++; } renderFrame(); raf = requestAnimationFrame(loop); }; const wake = () => { if (!running) { running = true; last = 0; physAccum = 0; raf = requestAnimationFrame(loop); } }; const sleep = () => { cancelAnimationFrame(raf); running = false; }; // ---- reduced motion: one precomputed long-exposure still -------------- const seedBirds = () => { const cx = w / 2; const cy = h / 2; const rx = Math.min(w, h) * 0.34; const ry = Math.min(w, h) * 0.24; for (let i = 0; i < N; i++) { const a = Math.random() * Math.PI * 2; const r = Math.sqrt(Math.random()); px[i] = cx + Math.cos(a) * rx * r; py[i] = cy + Math.sin(a) * ry * r; const dir = Math.random() * Math.PI * 2; const sp = MIN_SPEED + Math.random() * (CRUISE_MAX_SPEED - MIN_SPEED); vx[i] = Math.cos(dir) * sp; vy[i] = Math.sin(dir) * sp; alarm[i] = 0; turnSign[i] = 0; propAccum[i] = Math.random() * PROP_LATENCY; } }; const renderStatic = () => { if (w <= 0 || h <= 0) return; seedBirds(); rebuildGridDims(); rebuildDensityGrid(); nextPassIn = H > 0 ? 2.0 : Infinity; falconActive = false; // silent physics-only warmup, no canvas work at all const WARMUP_STEPS = 180; for (let s = 0; s < WARMUP_STEPS; s++) stepPhysics(FIXED_DT, s * FIXED_DT); // accumulate a short low-alpha trail window — genuinely different from // the live loop, not a slowed-down copy of it clearBg(); const ACCUM_STEPS = 24; for (let s = 0; s < ACCUM_STEPS; s++) { stepPhysics(FIXED_DT, (WARMUP_STEPS + s) * FIXED_DT); drawStreaks(0.1, 0.06); } drawWash(); }; // ---- mode plumbing ------------------------------------------------------ const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); let reduced = mq.matches; const applyMode = () => { if (reduced) { sleep(); if (w > 0 && h > 0) renderStatic(); } else { if (w > 0 && h > 0) { if (!seeded) { seedBirds(); seeded = true; } clearBg(); wake(); } } }; const onMq = () => { reduced = mq.matches; applyMode(); }; mq.addEventListener("change", onMq); const resize = () => { const rect = container.getBoundingClientRect(); if (rect.width < 4 || rect.height < 4) return; w = rect.width; h = rect.height; const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = Math.round(w * dpr); canvas.height = Math.round(h * dpr); canvas.style.width = `${w}px`; canvas.style.height = `${h}px`; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); rebuildGridDims(); rebuildDensityGrid(); if (!seeded && !reduced) { seedBirds(); seeded = true; } else if (seeded) { // clamp existing birds into the new bounds rather than reseeding for (let i = 0; i < N; i++) { if (px[i] > w) px[i] = w; if (py[i] > h) py[i] = h; } } applyMode(); }; const ro = new ResizeObserver(resize); ro.observe(container); resize(); const themeObserver = new MutationObserver(() => { readInk(); if (w <= 0 || h <= 0) return; if (reduced) renderStatic(); }); themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); const onVis = () => { if (document.hidden) sleep(); else if (!reduced) wake(); }; document.addEventListener("visibilitychange", onVis); return () => { ro.disconnect(); themeObserver.disconnect(); mq.removeEventListener("change", onMq); document.removeEventListener("visibilitychange", onVis); sleep(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [N, H]); return (

); } 62:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L63",null,{"files":[{"path":"registry/loud/murmur-shear/component.tsx","content":"$64","type":"registry:ui","target":"components/ui/murmur-shear.tsx"}],"className":"h-[70svh] min-h-80"}]]}]