Shaders

Visual template system

Fantasynth uses a template-based shader system. You write a single .glsl file with JSON frontmatter that defines the shader’s metadata and parameters, plus the GLSL code for your visual.

File structure

Each visual shader is a single .glsl file containing:

1. JSON frontmatter (between --- delimiters): ID, name, type, channels, parameters
2. GLSL body: includes, uniforms, helper functions, and the main computeVisual() function

The computeVisual function

Every visual shader must implement:

vec4 computeVisual(vec2 uv, float time) {
  // your shader code here
  return vec4(color, intensity);
}

Return vec4(rgb, intensity). The RGB color and an intensity value that controls blending.

Built-in uniforms

The template provides uniforms automatically: uTime, uBeat, uClipAge, uActivationBeat, uTrackFader, uOpacity, and more. You don’t need to declare these.

Custom parameters

Define parameters in the JSON frontmatter, then declare matching uniforms in the GLSL body. A param named speed becomes uniform float uSpeed (prefix u + capitalize).

World Position Offset

Optionally implement computeVertex(vec3 position, float time) to displace vertices in object space. This enables geometry animation driven by your shader.

Adding shaders to the app

There are three ways to bring a shader into Fantasynth.

Paste from ShaderToy

Copy the code from any ShaderToy shader (the one with a mainImage function) and paste it into Fantasynth. The app detects the ShaderToy format and converts it into a compatible visual automatically. Multi-pass shaders and custom inputs are not supported. Single-pass shaders work out of the box.

Drop in a .glsl file

If you have a .glsl file written in the visual shader format described above, drag it onto the app to import it into the content library.

Generate with an AI chatbot

You can have a chatbot write a shader for you.

1. Open the menu Settings panel, Build tab
2. Click Download Visual Prompt. This gives you a spec file describing the shader format.
3. Attach the spec to a conversation with a chatbot (Claude, ChatGPT, or any other) and ask for a shader
4. Drag the resulting .glsl file into the app to import it

Once imported, the shader behaves like any other visual. You can assign it to clips, tune its parameters, and perform with it live.