Executive Summary · 60-second read
A zero-dependency, open-source animation + UI library (v3.1.0 “Nova”,
MIT) built solo: 60 canvas animations and a tokenized UI kit behind one API, ~20 kB gzipped, accessible
and reduced-motion-safe. It ships TypeScript types, its own MCP server, a deterministic machine-readable
manifest, ESLint, CI on Node 18/20/22, and unit + live-MCP integration tests.
What’s built
- 60 canvas animations + 13 UI components behind one API,
Galaxy.create(type, target, options)
- Declarative (
data-galaxy) or imperative; live update() / pause / resume / destroy
- Theming via
--gx-* tokens + Galaxy.theme(); light/dark out of the box
- An MCP server (galaxy_quickstart / list / get / snippet) + a manifest + llms.txt
Engineering & honesty
- One shared
requestAnimationFrame loop for the whole page; off-screen auto-pause
- Honours
prefers-reduced-motion (one static frame); HiDPI via devicePixelRatio
- Minified build ~20 kB gzipped (JS) measured, served over unpkg/jsdelivr
- The manifest is generated from the runtime — counts can’t drift; a test enforces it
What it deliberately is NOT
- Not a framework and not framework-bound — plain script tag, no build step to use
- Not a dependency tree — zero runtime dependencies
- Not a client deployment — a self-initiated open-source project
- Not motion-careless — reduced-motion and performance are contracts, not afterthoughts
The idea
One line, zero dependencies
One constraint shapes the whole library: add a beautiful, accessible cosmic backdrop —
or a working modal, toast, or tab group — in a single line, no build step, nothing in your dependency
tree. The API is the product as much as the pixels are.
The animation engine
60 effects, one render loop
60 canvas animations, each live-tweakable. The performance is the part I’m proudest of,
and you can watch it below: every surface shares one requestAnimationFrame loop,
auto-pauses off-screen via IntersectionObserver, renders at devicePixelRatio,
and falls back to a single static frame under prefers-reduced-motion.
Live, on this page — not a screenshot. Every stage below is a real GalaxyJS instance, all sharing one render loop, each auto-pausing as it scrolls off-screen, and all rendering a single static frame if you prefer reduced motion. Several of these — supernova, galaxy merge, lattice, orrery, star cluster, magnetosphere, starburst — are new in v3.1.0.
The UI kit
A real component set, tokenized
Beyond backdrops, it’s a usable UI kit — all driven by --gx-* tokens,
so one Galaxy.theme() call re-skins everything. Try it live:
All live components, straight from the library — buttons, inputs, a switch, badges, a tooltip and rating, tabs and an accordion, plus Galaxy.toast(), Galaxy.modal(), Galaxy.confirm() and Galaxy.drawer() on the buttons above.
AI-native
An MCP server in the box
GalaxyJS ships its own MCP server with a manifest generated from the runtime, so the
effects an AI agent sees can never drift from the code. Four tools let an agent discover everything and return
ready-to-paste code in one call — the same AI-native contract approach as my
eds-mcp design-system server.
Production engineering
Built to be pulled and shipped
Packaged like a real product: TypeScript types, a ~20 kB-gzipped bundle on unpkg/jsdelivr,
a deterministic manifest, and two test suites — one dependency-free, one that boots the real MCP
server over stdio — all run on Node 18/20/22. Clone it and npm run validate is green.
What this case study evidences · and what it doesn’t
For a hiring panel
What it evidences is range: alongside the regulated-finance work, GalaxyJS shows I can design
and engineer a polished, zero-dependency front-end library — API, performance, accessibility, a tokenized
system, a real build and test pipeline, an AI-native contract — solo. It’s a self-initiated
open-source project, not a client deployment, and its numbers are measured facts. The discipline is the same
one I bring to fintech; the domain is creative.