Starfield everywhere: comets, cursor gravity, and git-commit constellations
Dec 23, 2025 • Frontend
Why the sky? I wanted the site to feel alive without hijacking the layout—so the background is a shared starfield that now runs on every page. It’s light on CPU, respects themes, and layers under everything.
What’s moving
- Drift + twinkle: 400-ish stars drift slowly with tiny per-star velocities and sinusoidal twinkle phases.
- Comets: Occasionally spawned streaks with a fading tail; capped to keep it subtle.
- Cursor gravity: A small inverse-distance nudge so nearby stars react when you move your mouse.
Git commit constellations
- Seeded by history: The latest dozen commit hashes seed constellation centers with a deterministic RNG.
- No overlap: Centers are spaced ~140px apart, each with a 5-node cluster inside a ~70px radius.
- Labels: First node of a constellation shows the short hash label on large screens.
- Drift & pulse: Constellations inherit the same gentle drift; nodes pulse to avoid looking flat.
How it’s rendered
- Canvas everywhere: A single fixed `
- Cheap draw loop: `requestAnimationFrame`, no allocations in the hot path, small particle counts, and precomputed gradients.
- Theme-safe: Background fill and gradients sit behind all content; no interference with buttons, menus, or modals.
Why this design
- Always-on ambience without blocking interaction.
- Developer “signature”: constellations literally come from the commit history.
- Global consistency: every page shares the same sky.