Quickstart

Create a shader

Sign in, click New shader and give it a name. It starts with a UV node connected to the Output, so you already see something on screen.

Add and connect nodes

Press ⌘+K to search and add nodes. Drag from an output to an input to connect two nodes.

See the result

The output node shows whatever you connect to its color input. Every node also has its own preview, so you can check each step. Your work saves automatically.

Publish

Click Publish. In the same dialog you can make it public, so anyone can find it in the community and fork it.

Add it to your app

Open the Embed dialog in the editor and copy the snippet:

import { Shader } from "@fluorite-studio/react";

export const Hero = () => (
  <Shader
    id="9f3c7b21-4d8e-4a10-9f2b-7c6d5e4f3a21"
    play="visible"
    style={{ width: "100%", height: 400 }}
  />
);

Only published shaders can be embedded.

Next: Embed in React for every option.