Introduction

Fluorite lets you build TSL shaders visually. Drag nodes onto a canvas, connect them, and see the result live. No shader code required.

When it's ready, publish it and add it to your app:

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

export const Hero = () => (
  <Shader
    id="9f3c7b21-4d8e-4a10-9f2b-7c6d5e4f3a21"
    inputs={{ speed: 1.4, tint: [0.15, 0.6, 0.9] }}
    style={{ width: "100%", height: 420 }}
  />
);

Use inputs to change the shader from your page, for example with a slider or on scroll.

Where to go next

• Quickstart: from sign-in to a shader in your app.
• three.js, TSL and nodes: the nodes, presets and community shaders you build with.
• Shaders: your shader and how it's saved.
• Publishing: make a version live.
• Shader inputs: values your app can change.
• Embed in React: add a shader to your app.
• Tokens: preview an unpublished draft on a real page.