Payload
~69kB gzipped
Measured · jsDelivr @v3.4.0 pin
GalaxyJS
Eighty-six cosmic scenes. Nothing to install.
The starscape behind this is the real engine — running live
01 — THE BRIEF
A cosmic engine that drops into anything.
No framework. No build step. No required dependencies. One <script> tag and one call put 86 hand-tuned canvas, WebGL2 and three.js scenes into a React app, a Vue app, or a plain HTML file. The hard part wasn't drawing stars — it was making the whole thing feel weightless: small, fast, portable, and accessible by default.
Animations
0
Counted · v3.4.0 catalog · 72 / 8 / 6 tiers
Dependencies
0
Framework-free, no build
Contract · required runtime only
rAF loops
1
One shared frame loop
Architecture · shipped
Offscreen
auto-pauseIntersectionObserver
Contract · engine behaviour
A11y
reduced-motionby contract
Contract · CI-kept still frame
DesignOps & Performance Governance
Why a Product Designer built an animation engine: To eliminate the persistent friction where brand/marketing desires high-impact motion, but engineering rejects it over Core Web Vitals (LCP/INP) and mobile battery drain. GalaxyJS proves that sensory luxury and strict performance governance can be unified in a zero-dependency contract.
Modelled-vs-measured: 86 scenes and the 72 / 8 / 6 renderer split are catalog counts from the tagged v3.4.0 release, not product-outcome metrics. ~69 kB gzip is the measured payload on the jsDelivr pin. Zero required dependencies is a browser-runtime contract — three.js is optional and lazy.
02 — THE ENGINE
Don't take my word for it. Drive it.
This panel is the actual library, running live. Pick a scene — the engine mounts it on a HiDPI canvas, runs it on the shared frame loop, and would pause it the moment you scrolled away. The case study is the demo.
eventHorizon
status rendering
shared rAF · dpr-aware · auto-pause
shared rAF · dpr-aware · auto-pause
Select a scene
Telemetry
api · Galaxy.create(name, el)
scenes · —
theme · token-based, dual
extend · registerAnimation()
scenes · —
theme · token-based, dual
extend · registerAnimation()
03 — THE CATALOG
Eighty-six scenes. All real.
A few of the catalog, each a separate live instance. They only animate while on screen — scroll past and they sleep. The six leading tiles are the newest work: three.js scenes on an optional tier, doing what canvas and a fragment shader cannot.
THREE RENDERER TIERS · ONE API
A library gets heavy by making everyone pay for its most expensive feature. So the tiers are graded, and the top one is opt-in: three.js is fetched only if you mount one of the six scenes that need it — once per page, shared. Mount none and you download nothing extra. If it cannot load at all, the surface paints a still poster rather than an empty box.
72
canvas 2D
The default and the fallback. Needs nothing.
8
WebGL2 shader
Hand-written GLSL on one full-screen triangle. Falls back to a 2D poster.
6
three.js optional
A real scene graph: 3D volumes, 340k instanced stars, GPGPU state, a post chain. Loaded on demand.
Galaxy.rendererOf('eventHorizon') // "three"
Galaxy.useThree(THREE) // bring your own — zero network
Galaxy.useThree(THREE) // bring your own — zero network
04 — UNDER THE HOOD
Performance is a feature.
Eighty-six scenes could mean eighty-six timers fighting the CPU. They don't. Every scene shares one requestAnimationFrame loop, each canvas is device-pixel-ratio aware so it stays crisp on retina, and an IntersectionObserver pauses anything scrolled offscreen. A token-based theme drives colour, and registerAnimation() lets anyone add an 87th scene without touching the core.
Single rAF loop
All scenes tick on one shared frame — no timer pile-up, predictable budget.
HiDPI + auto-pause
dpr-aware rendering; offscreen canvases pause via IntersectionObserver to save power.
Extensible by design
registerAnimation(name, fn) + a token theme — add scenes, reskin everything, zero core edits.
05 — THE CONTRACT
The cosmos holds still when asked.
Every animation honors prefers-reduced-motion — instead of moving, it renders a single composed static frame. Motion sensitivity shouldn't mean a blank box; it should mean a still, beautiful one. A test in CI keeps that promise.
This page honors it too — turn on Reduce Motion and the boot sequence skips, the reticle cursor returns to default, and every cosmic scene freezes to one frame.
06 — FOR HUMANS & AGENTS
A drop-in tag — or an agent's call.
A human adds one script and ships. But GalaxyJS also carries the machine layer: an MCP server, hand-written TypeScript types, a generated manifest, and an llms.txt. So an AI agent in Claude Desktop or Cursor can discover all 86 scenes — and which of the three renderer tiers each needs — and wire one into a page from a structured contract — the same instinct behind its sibling registry, ReactΩ.
MCP server
4 toolslist · get · scaffold · meta
Types + manifest
galaxy.d.ts+ generated manifest
Agent guide
llms.txttoken-efficient
07 — TWO LANES
One author, two engines.
GalaxyJS and ReactΩ are deliberately separate — different stacks, different problems, the same discipline underneath.
GalaxyJS
Vanilla cosmic engine
Framework-free canvas animations + UI kit you drop into any page.
- Plain JS · no framework · no build
- One <script> / CDN drop-in
- 86 scenes · single shared rAF
- Reduced-motion by contract
ReactΩ
React component registry
Copy-paste motion, interaction & physics components you own — AI-native.
- React + TypeScript + Tailwind
- Registry + CLI + shadcn + MCP
- 57 components you own outright
- Reduced-motion by contract
08 — FLIGHT LOG
Not a demo. Shipped.
T+00
v3.4.0 "Optics" · MIT
Tagged release — 86 animations across three renderer tiers, immutably pinned on jsDelivr. Release notes ↗
T+01
Live playground
All 86 scenes + the UI kit, native on GitHub Pages. edwson.github.io/GalaxyJS ↗
T+02
CI on Node 18 · 20 · 22
Syntax + eslint, a true minified build, a manifest-drift gate, and a real end-to-end MCP test — green on every push.
T+03
Built solo, AI-augmented
Engine, UI kit, MCP, and docs shipped end-to-end with an AI pair — disclosed openly. Honest ~69 kB, measured not guessed.
09 — WHAT THIS EVIDENCES
I engineered an experience to feel effortless.
Anyone can draw a starfield. The craft was making eighty-six of them feel weightless — one frame loop, dpr-crisp, auto-paused, ~69 kB, and still beautiful when motion is switched off — and then making the whole thing installable by a person or an agent. Performance, portability, and accessibility weren't constraints on the product. They were the product.
10 — NEXT