/motion

Create looping shaders, animate type, and shape your next page. A local generative studio with an AI co-pilot and Chromaverse design tokens.

>_ git clone https://github.com/murderszn/motion.git && cd motion && npm install && npm run dev

GitHub Join Discord ↗

shader gallery

Generative shaders, live in your browser

Explore the collection. Adjust the motion, find a palette, and copy your favorite into your next project.

Vaporwave

Purples, pinks, and cyan bloom against deep black — ideal for aurora and flow modes where neon gradients can stretch across the canvas.

how it works

Talk to any AI like it's your VFX artist

Describe what you want. The agent edits configs, swaps themes, and bakes the final page — all from a conversation.

You

Build a landing page with /motion — dark aurora shader background, Vaporwave Chromaverse theme, kinetic typography on the headline, glass panels for content.

Claude

I'll scaffold this step by step.

Created index.html with shader canvas

Applied Vaporwave theme tokens

`--accent: #b026ff; --bg: #0d0221;`

Configured aurora fragment shader (slow phase)

`u_phase` loop at 12s, tinted to palette

Added kinetic typography module

CSS `will-change: transform`, canvas overlay

Layered glass-morphism cards

`backdrop-filter: blur(20px)` on content panels

Preview at http://localhost:5173

You

Swap the accent to something warmer — switch to the Magma theme instead.

Claude

Swapped to Magma theme

`--accent: #ef4444; --bg: #1a0505;`

Re-tinted shader uniforms to crimson/orange

Updated kinetic text color to match

Looks warmer. Want me to tweak anything else?

You

Looks great. Bake it for production.

Claude

$ motion bake --config magma-theme.json --output build/

[baker] baking index.html with WebGL contexts…

Baked build/index.html (64kb) — ready to ship

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.