<a href="/murmurations" class="flex items-center gap-1.5 murmuration-flock" aria-label="Murmurations">

		{Array.from({ length: 7 }).map(() => (

			<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 256 256" class="murmuration-bird">

				<path fill="currentColor" d="M237.33 106.21L61.41 41l-.16-.05a16 16 0 0 0-20.35 20.3a1 1 0 0 0 .05.16l65.26 175.92A15.77 15.77 0 0 0 121.28 248h.3a15.77 15.77 0 0 0 15-11.29l.06-.2l21.84-78l78-21.84l.2-.06a16 16 0 0 0 .62-30.38Zm-87.49 38.09a8 8 0 0 0-5.54 5.54l-23 82.16l-.06-.17L56 56l175.82 65.22l.16.06Z"/>

			</svg>

		))}

	</a>

	<script>

		document.querySelectorAll<SVGElement>('.murmuration-flock .murmuration-bird').forEach((el) => {

			const deg = Math.random() * 360;

			el.style.transform = `rotate(${deg}deg)`;

		});

	</script>

---

---

<canvas id="murmurations-canvas"></canvas>

<script>

(() => {

	const canvas = document.getElementById('murmurations-canvas') as HTMLCanvasElement;

	const ctx = canvas.getContext('2d')!;

	let W: number, H: number;

	const DPR = Math.min(window.devicePixelRatio || 1, 2);

	function viewportSize() {

		const vv = window.visualViewport;

		return {

			w: vv ? vv.width : window.innerWidth,

			h: vv ? vv.height : window.innerHeight,

		};

	}

	function resize() {

		const { w, h } = viewportSize();

		W = w;

		H = h;

		canvas.width = W * DPR;

		canvas.height = H * DPR;

		canvas.style.width = W + 'px';

		canvas.style.height = H + 'px';

		ctx.setTransform(DPR, 0, 0, DPR, 0, 0);

		ctx.lineCap = 'round';

		ctx.strokeStyle = 'rgba(245, 243, 238, 0.78)';

		ctx.lineWidth = 1.4;

	}

	resize();

	window.addEventListener('resize', resize);

	window.addEventListener('orientationchange', resize);

	if (window.visualViewport) {

		window.visualViewport.addEventListener('resize', resize);

	}

	const TOPOLOGICAL_K = 7;

	const PERCEPTION = 70;

	const SEP_RANGE = 14;

	const MAX_SPEED = 3.4;

	const MIN_SPEED = 2.2;

	const MAX_FORCE = 0.12;

	const W_SEP = 1.8;

	const W_ALIGN = 1.4;

	const W_COH = 0.9;

	const W_ATTRACT = 0.06;

	const W_NOISE = 0.015;

	const COUNT = Math.min(420, Math.floor((W * H) / 3200));

	const attractor = {

		x: W / 2, y: H / 2,

		t: Math.random() * 1000,

		update() {

			this.t += 0.003;

			const cx = W / 2, cy = H / 2;

			const rx = W * 0.32, ry = H * 0.28;

			this.x = cx + Math.sin(this.t * 1.3) * rx + Math.cos(this.t * 0.7) * rx * 0.3;

			this.y = cy + Math.cos(this.t * 1.1) * ry + Math.sin(this.t * 1.7) * ry * 0.25;

		}

	};

	class Boid {

		x: number; y: number; vx: number; vy: number; ax = 0; ay = 0;

		constructor() {

			this.x = Math.random() * W;

			this.y = Math.random() * H;

			const a = Math.random() * Math.PI * 2;

			const s = MIN_SPEED + Math.random() * (MAX_SPEED - MIN_SPEED);

			this.vx = Math.cos(a) * s;

			this.vy = Math.sin(a) * s;

		}

		edges() {

			const m = 20;

			if (this.x < -m) this.x = W + m;

			else if (this.x > W + m) this.x = -m;

			if (this.y < -m) this.y = H + m;

			else if (this.y > H + m) this.y = -m;

		}

		flock(candidates: Boid[]) {

			const dists: { o: Boid; d2: number; dx: number; dy: number }[] = [];

			for (let i = 0; i < candidates.length; i++) {

				const o = candidates[i];

				if (o === this) continue;

				const dx = o.x - this.x;

				const dy = o.y - this.y;

				const d2 = dx * dx + dy * dy;

				if (d2 < PERCEPTION * PERCEPTION && d2 > 0) {

					dists.push({ o, d2, dx, dy });

				}

			}

			dists.sort((a, b) => a.d2 - b.d2);

			const k = Math.min(TOPOLOGICAL_K, dists.length);

			let alignX = 0, alignY = 0;

			let cohX = 0, cohY = 0;

			let sepX = 0, sepY = 0;

			let sepCount = 0;

			for (let i = 0; i < k; i++) {

				const { o, d2, dx, dy } = dists[i];

				alignX += o.vx;

				alignY += o.vy;

				cohX += o.x;

				cohY += o.y;

				if (d2 < SEP_RANGE * SEP_RANGE) {

					const d = Math.sqrt(d2);

					const f = 1 / (d + 0.001);

					sepX -= (dx / d) * f;

					sepY -= (dy / d) * f;

					sepCount++;

				}

			}

			let fx = 0, fy = 0;

			if (k > 0) {

				alignX /= k; alignY /= k;

				const m = Math.hypot(alignX, alignY);

				if (m > 0) {

					alignX = alignX / m * MAX_SPEED - this.vx;

					alignY = alignY / m * MAX_SPEED - this.vy;

					const sm = Math.hypot(alignX, alignY);

					if (sm > MAX_FORCE) { alignX = alignX / sm * MAX_FORCE; alignY = alignY / sm * MAX_FORCE; }

					fx += alignX * W_ALIGN;

					fy += alignY * W_ALIGN;

				}

				cohX = cohX / k - this.x;

				cohY = cohY / k - this.y;

				const cm = Math.hypot(cohX, cohY);

				if (cm > 0) {

					cohX = cohX / cm * MAX_SPEED - this.vx;

					cohY = cohY / cm * MAX_SPEED - this.vy;

					const sm = Math.hypot(cohX, cohY);

					if (sm > MAX_FORCE) { cohX = cohX / sm * MAX_FORCE; cohY = cohY / sm * MAX_FORCE; }

					fx += cohX * W_COH;

					fy += cohY * W_COH;

				}

			}

			if (sepCount > 0) {

				const m = Math.hypot(sepX, sepY);

				if (m > 0) {

					sepX = sepX / m * MAX_SPEED - this.vx;

					sepY = sepY / m * MAX_SPEED - this.vy;

					const sm = Math.hypot(sepX, sepY);

					if (sm > MAX_FORCE * 2) { sepX = sepX / sm * MAX_FORCE * 2; sepY = sepY / sm * MAX_FORCE * 2; }

					fx += sepX * W_SEP;

					fy += sepY * W_SEP;

				}

			}

			const adx = attractor.x - this.x;

			const ady = attractor.y - this.y;

			const ad = Math.hypot(adx, ady);

			if (ad > 0) {

				fx += (adx / ad) * W_ATTRACT;

				fy += (ady / ad) * W_ATTRACT;

			}

			fx += (Math.random() - 0.5) * W_NOISE;

			fy += (Math.random() - 0.5) * W_NOISE;

			this.ax += fx;

			this.ay += fy;

		}

		update() {

			this.vx += this.ax;

			this.vy += this.ay;

			const sp = Math.hypot(this.vx, this.vy);

			if (sp > MAX_SPEED) {

				this.vx = this.vx / sp * MAX_SPEED;

				this.vy = this.vy / sp * MAX_SPEED;

			} else if (sp < MIN_SPEED && sp > 0) {

				this.vx = this.vx / sp * MIN_SPEED;

				this.vy = this.vy / sp * MIN_SPEED;

			}

			this.x += this.vx;

			this.y += this.vy;

			this.ax = 0;

			this.ay = 0;

		}

		draw() {

			const angle = Math.atan2(this.vy, this.vx);

			const cos = Math.cos(angle);

			const sin = Math.sin(angle);

			const len = 3.2;

			ctx.beginPath();

			ctx.moveTo(this.x - cos * len, this.y - sin * len);

			ctx.lineTo(this.x + cos * len * 0.6, this.y + sin * len * 0.6);

			ctx.stroke();

		}

	}

	const boids: Boid[] = [];

	const cx0 = W / 2, cy0 = H / 2;

	for (let i = 0; i < COUNT; i++) {

		const b = new Boid();

		const r = Math.random() * Math.min(W, H) * 0.25;

		const a = Math.random() * Math.PI * 2;

		b.x = cx0 + Math.cos(a) * r;

		b.y = cy0 + Math.sin(a) * r;

		boids.push(b);

	}

	const cellSize = PERCEPTION;

	const grid = new Map<string, Boid[]>();

	function buildGrid() {

		grid.clear();

		for (let i = 0; i < boids.length; i++) {

			const b = boids[i];

			const cx = Math.floor(b.x / cellSize);

			const cy = Math.floor(b.y / cellSize);

			const k = cx + ',' + cy;

			let arr = grid.get(k);

			if (!arr) { arr = []; grid.set(k, arr); }

			arr.push(b);

		}

	}

	function neighbors(b: Boid): Boid[] {

		const cx = Math.floor(b.x / cellSize);

		const cy = Math.floor(b.y / cellSize);

		const out: Boid[] = [];

		for (let dx = -1; dx <= 1; dx++) {

			for (let dy = -1; dy <= 1; dy++) {

				const arr = grid.get((cx + dx) + ',' + (cy + dy));

				if (arr) for (let i = 0; i < arr.length; i++) out.push(arr[i]);

			}

		}

		return out;

	}

	function loop() {

		ctx.fillStyle = 'rgba(18, 17, 19, 0.55)';

		ctx.fillRect(0, 0, W, H);

		attractor.update();

		buildGrid();

		for (let i = 0; i < boids.length; i++) {

			boids[i].flock(neighbors(boids[i]));

		}

		for (let i = 0; i < boids.length; i++) {

			boids[i].update();

			boids[i].edges();

			boids[i].draw();

		}

		requestAnimationFrame(loop);

	}

	loop();

})();

</script>

<style>

	#murmurations-canvas {

		position: fixed;

		inset: 0;

		width: 100%;

		height: 100%;

		display: block;

		touch-action: none;

	}

</style>

---

import Murmurations from "@/components/page/Murmurations.astro";

---

<html lang="en">

	<head>

		<meta charset="utf-8" />

		<meta name="viewport" content="width=device-width, initial-scale=1" />

		<meta name="apple-mobile-web-app-capable" content="yes" />

		<meta name="theme-color" content="#121113" />

		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<title>Murmurations</title>

		<style>

			* { margin: 0; padding: 0; box-sizing: border-box; }

			html, body {

				width: 100%;

				height: 100vh;

				height: 100dvh;

				overflow: hidden;

				background: #121113;

				overscroll-behavior: none;

				touch-action: none;

				-webkit-tap-highlight-color: transparent;

			}

			.top-link {

				position: fixed;

				top: max(16px, env(safe-area-inset-top));

				color: #f5f3ee;

				font-size: 16px;

				z-index: 10;

				text-decoration: underline;

				font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;

				padding: 8px;

				margin: -8px;

			}

			.top-link.title { left: max(16px, env(safe-area-inset-left)); }

			.top-link.back { right: max(16px, env(safe-area-inset-right)); }

			.info-btn {

				position: fixed;

				bottom: max(16px, env(safe-area-inset-bottom));

				right: max(16px, env(safe-area-inset-right));

				width: 40px;

				height: 40px;

				border-radius: 50%;

				border: 1px solid rgba(245, 243, 238, 0.6);

				background: rgba(18, 17, 19, 0.6);

				color: #f5f3ee;

				font-family: ui-serif, Georgia, serif;

				font-style: italic;

				font-size: 18px;

				cursor: pointer;

				z-index: 10;

				display: flex;

				align-items: center;

				justify-content: center;

				padding: 0;

				-webkit-tap-highlight-color: transparent;

			}

			.info-btn:hover, .info-btn:active { background: rgba(245, 243, 238, 0.15); }

			.info-panel {

				position: fixed;

				bottom: calc(max(16px, env(safe-area-inset-bottom)) + 52px);

				right: max(16px, env(safe-area-inset-right));

				left: max(16px, env(safe-area-inset-left));

				max-width: 340px;

				margin-left: auto;

				background: rgba(18, 17, 19, 0.94);

				border: 1px solid rgba(245, 243, 238, 0.2);

				color: #f5f3ee;

				padding: 16px 18px;

				font-size: 13px;

				line-height: 1.5;

				z-index: 10;

				display: none;

				font-family: ui-sans-serif, system-ui, sans-serif;

			}

			.info-panel.open { display: block; }

			.info-panel h2 {

				font-size: 14px;

				margin-bottom: 8px;

				font-weight: 600;

			}

			.info-panel p { margin-bottom: 8px; }

			.info-panel p:last-child { margin-bottom: 0; }

			.info-panel a { color: #f5f3ee; text-decoration: underline; }

			@media (max-width: 480px) {

				.top-link { font-size: 14px; }

				.info-panel { font-size: 12px; padding: 14px; }

			}

		</style>

	</head>

	<body>

		<span class="top-link title">Murmurations</span>

		<a href="/" class="top-link back">Back</a>

		<Murmurations />

		<button id="info-btn" class="info-btn" aria-label="About this simulation" aria-expanded="false">i</button>

		<div id="info-panel" class="info-panel" role="dialog" aria-label="About this simulation">

			<h2>Boids &amp; Starlings</h2>

			<p>

				A <em>murmuration</em> is the swirling, shape-shifting flight of thousands of starlings at dusk.

				No leader directs them — coherence emerges from each bird reacting to its closest neighbors.

			</p>

			<p>

				This simulation uses <a href="https://en.wikipedia.org/wiki/Boids" target="_blank" rel="noreferrer">Craig Reynolds&apos; boids algorithm</a>:

				each agent follows three rules — <strong>separation</strong> (avoid crowding),

				<strong>alignment</strong> (match neighbor heading), and <strong>cohesion</strong> (steer toward neighbor center).

			</p>

			<p>

				Real starlings track ~7 nearest neighbors regardless of distance — topological, not metric.

				That fixed count is why turning waves cross the flock so fast and stay crisp at any density.

			</p>

		</div>

		<script>

			const btn = document.getElementById('info-btn')!;

			const panel = document.getElementById('info-panel')!;

			btn.addEventListener('click', (e) => {

				e.stopPropagation();

				const open = panel.classList.toggle('open');

				btn.setAttribute('aria-expanded', String(open));

			});

			document.addEventListener('click', (e) => {

				if (!panel.classList.contains('open')) return;

				if (panel.contains(e.target as Node)) return;

				panel.classList.remove('open');

				btn.setAttribute('aria-expanded', 'false');

			});

		</script>

	</body>

</html>