Shaders, made visual.

A node-based shader editor. Wire nodes together and see every change as you make it.

acme.studio

Build what comes next.

Plan, build and ship with your whole team, in one place.

Start for freeBook a demo

Start with nodes. Save your own.

Link a few nodes together to make an effect. Publish it and it becomes a node you can drop into any other shader. The one at the top of this page is below, with its settings as inputs.

Put it on your site.

Add one React component to your app. Settings you pick in the editor, like speed or glow, become props you can change from your code.

$npm install @fluorite-studio/react three
See how to embed
hero.tsxtsx
import { Shader } from "@fluorite-studio/react"

export const Hero = () => (
  <Shader
    id="cf48f983-af6c-43ea-9ee4-923d27426d66"
    inputs={{ Speed: 1.00, Glow: 1.00, "Line Width": 1.00 }}
  />
)
Speed1.00
Glow1.00
Line Width1.00

Describe it. Your agent builds it.

Connect Claude Code, Codex or Cursor to Fluorite. Your agent finds the nodes, wires them, renders the result to check it, and publishes.

$claude mcp add fluorite -e FLUORITE_TOKEN=flr_… -- npx -y @fluorite-studio/mcp
Set up the MCP server
claudefluorite mcp
  1. >Make a slow, colorful plasma and show me a render.
  2. ●nodes_list { query: "plasma" }└wave, twirl, cosine-palette
  3. ●shaders_create { name: "Plasma Classic" }└Draft created
  4. ●shaders_edit 9 ops└Revision 1, no problems
  5. ●render { times: [0, 1, 2] }└3 frames
  6. ●shaders_publish └Version 1 published
  7. ●Plasma Classic is published and ready to embed.
Try a brief
renderpng
Plasma Classic, rendered

Ready-made effects to start from.

Pixelate, dither, noise, gradients, shapes and color grading. Use one as it is, or open it up and tweak it.

Try a preset

See what others are making.

Explore shaders people have shared, and copy any of them into your editor to remix.

Explore the community

Make your first shader.

It's free and runs in your browser, so there's nothing to install.