/motion
One downloadable generative studio. Shape looping WebGL shaders, export reproducible configs, and sharpen your aesthetic with Chromaverse — a featured theme gallery for better tastemaking and agent-ready design tokens.
>_
git clone https://github.com/murderszn/motion.git && cd motion && npm install && npm run dev
interactive config builder
Tweak shader parameters dynamically
Tweak the shader parameters on the right. `/motion` dynamically updates the schema config on the left. Feed this JSON structure to your favorite AI assistant to automate shader styling.
live preview
Shader Presets
Aurora Waves
Cyber Grid
Lava Flow
Cosmic Nebula
how it works
Three steps to generate your graphics
Create config files, ask any AI assistant to modify parameters, and export self-contained responsive code blocks in seconds.
01
install & run locally
Clone the repo and start the Vite dev server on your machine. This mounts a WebGL preview canvas directly on your local network.
$ git clone https://github.com/murderszn/motion.git
$ cd motion && npm install && npm run dev
[vite] ready → http://localhost:5173
02
instruct any ai assistant
Ask your favorite AI (like Cursor, Copilot, or ChatGPT) to configure a specific layout or palette using `/motion`'s JSON parameter format.
> "Create a slow lavender wave preset config:"
[agent] updating motion.config.json...
[agent] configuration completed.
03
bake & export index.html
Compile your configured studio workspace into a single self-contained, offline-ready HTML splash page with embedded WebGL shaders.
$ motion bake --config my-theme.json --output build/
[baker] baking index.html with WebGL contexts...
[baker] successfully baked page build/index.html (48kb)
two offerings
Motion for atmosphere. Chromaverse for structure.
Each studio exports machine-readable JSON your agent can read, remix, and deploy. Together they become a taste profile — a complete visual language for generating cohesive sites without guessing your aesthetic.
/motion
A local WebGL shader studio. Configure looping presets, tune parameters in real time, and export motion.config.json — seeded, reproducible motion graphics for backgrounds, hero sections, and splash pages.
15 shader presets
JSON schema
standalone HTML export
Try the shader playground →
/chromaverse
A theme gallery and builder with 65 curated palettes. Copy CSS variables, export light/dark surface tokens, and save theme.json — typography, accents, and component patterns your agent can apply across any layout.
65 themes
CSS variables
theme builder
Enter Chromaverse →
Together = your taste profile
Point Cursor, Claude, or any coding agent at both configs. Shaders set mood and motion. Theme tokens set color, type, spacing, and UI hierarchy. The agent assembles production-ready pages that look intentional — not generic.
motion.config.json
+
chromaverse theme.json
→
agent-generated site
frequently asked questions
Got questions? We've got answers.
What is /motion?
+
`/motion` is an open-source local generative graphics shader studio. It acts as a workspace where you can write, preview, and test WebGL shaders and looping visual templates, exporting them directly into offline-ready standalone HTML splash pages.
Does /motion include a built-in AI coding assistant?
+
No. `/motion` is a local software utility and visual shader studio. However, it uses a clean, standardized JSON schema configuration structure. This makes it extremely easy for you to ask your own favorite coding agent (like Cursor, Copilot, ChatGPT, or Gemini) to write or modify visual configs that you can paste directly into `/motion`.
Is /motion free?
+
Yes! `/motion` is completely free, open-source, and hosted on GitHub. There are no paid plans, no subscription pricing, and no server-side licensing fees. It is built to run entirely on your local machine.
Can I export custom GLSL code?
+
Absolutely. You can download the generated fragment shader code directly from the workspace UI, or use the CLI exporter to save the fragment shader code as a standard `.frag` file, ready to be used in shadertoy or other WebGL environments.
Are the exported HTML files self-contained?
+
Yes. The exporter compiles the GLSL shader code, text layers, CSS stylesheet rules, grain, vignette, and WebGL rendering scripts directly into a single self-contained HTML page. You can host it on GitHub Pages, Netlify, or open it entirely offline.
Create what's exciting.
Maintain what's essential.
Get started with `/motion` today for free. Clone the repository, spin up the server, and write configurations using your favorite AI agent.
>_
git clone https://github.com/murderszn/motion.git && cd motion && npm install && npm run dev