GalaxyJS is a tiny, beautiful animation & component library. Cosmic canvas backdrops, themeable UI components, and a single unified API: Galaxy.create().
Every animation is a canvas surface auto-sized to its container, paused when off-screen, and rendered through one shared loop. Click any card to load it in the playground.
Adjust parameters in real time and copy the exact code you need.
Buttons, cards, modals, toasts, tooltips, tabs, accordions and more — all driven by the same design tokens, all wired with one call to Galaxy.autoInit().
Launch ready
All systems nominal.
Hull breach
Seal the airlock now.
Burn scheduled for T-minus 42s.
| Body | Type | Distance (AU) |
|---|---|---|
| Mercury | Terrestrial | 0.39 |
| Jupiter | Gas giant | 5.20 |
| Neptune | Ice giant | 30.1 |
This panel slid in from the side with one Galaxy.drawer() call. Press Esc or click the backdrop to dismiss.
Plain <script>, CDN, npm/ESM, zero-JS declarative — or let an AI agent wire it up for you. Same one-line API everywhere.
<link rel="stylesheet" href="galaxy.css"> <script src="galaxy.js"></script> <script> Galaxy.create('nebula', '#hero') </script>
<link rel="stylesheet" href="https://unpkg.com/galaxyjs@3/galaxy.css"> <script src="https://unpkg.com/galaxyjs@3/galaxy.js"></script>
npm install galaxyjs import Galaxy from "galaxyjs"; import "galaxyjs/galaxy.css"; Galaxy.create("nebula", "#hero");
<!-- animation --> <div data-galaxy="warp" data-galaxy-speed="1.5"></div> <!-- components auto-wire too --> <button data-gx-tooltip="Hi!">Hover</button>
GalaxyJS ships a machine-readable galaxy.manifest.json,
an llms.txt guide, and a
Model Context Protocol server.
Any AI agent can discover and use every animation & component in one line — at minimal token cost.
Add to your MCP client (e.g. Claude Desktop):
{
"mcpServers": {
"galaxyjs": {
"command": "npx",
"args": ["-y", "galaxyjs-mcp"]
}
}
}
Then just ask:
// you "Use GalaxyJS to add a slow purple nebula to #hero" // agent calls galaxy_snippet → Galaxy.create('nebula', '#hero', { speed: 0.6, colors: ['#7c5cff', '#4c1d95'] });