SELF-INITIATED · OPEN SOURCE · CREATIVE FRONT-END LIBRARY

GalaxyJS
The universe, one line of code

A zero-dependency, open-source library: 60 canvas animations and a tokenized UI kit behind one API (Galaxy.create()), ~20 kB gzipped, accessible by default — and it ships its own MCP server. I designed and engineered all of it. Best experienced live, so the demos below are real GalaxyJS, running on this page.

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 · quasar

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.

supernova
galaxyMerge
lattice
orrery
starcluster
magnetosphere
aurora
nebula
starburst
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:

success warning accent chip ⌘K
Planets trace clean elliptical paths around a star.
Yes — pure vanilla JS and CSS, no build step required to use it.
Always — a single static frame when the user prefers reduced motion.

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.

Portfolio threads

Where this case study sits in the larger web

GalaxyJS connects two threads: shipping AI-native open-source the right way, and front-end craft held to a production standard.

Thread

AI-native, open-source systems

A machine-readable single source of truth served to humans and AI agents alike — the same MCP + manifest discipline across very different domains.

Thread

Front-end craft & performance

Pixels held to an engineering standard — one render loop, off-screen pausing, HiDPI, reduced-motion, and a tokenized component system.

  • GalaxyJS · 60 effects, one rAF loop Canvas performance + a11y ~20 kB gzip · reduced-motion safe
  • Design System Showcase 239 live component demos Dual-theme · delegated JS · WCAG 2.1 AA
  • ReactΩ · Component system Production React component library Accessibility-first · ~40% UI dev speedup