Shader

Shader(props?: {
    fragmentShader?: string;
    uniforms?: Record<string, number | number[] | boolean>;
    timeEnabled?: boolean;
    mouseEnabled?: boolean;
    updateInterval?: number;
}): Component;

object

Configuration options for the shader.

Show properties

string

Fragment shader source code in GLSL. The entry point is void main(), which writes the pixel color to gl_FragColor.

Record<string, number | number[] | boolean>

Custom uniform values passed to the shader. Keys become uniform names. Values can be numbers, arrays of numbers (for vectors), or booleans.

boolean

Whether to update the time uniform (seconds since the shader started) on each frame. Defaults to true.

boolean

Whether to update the mouse uniform with the mouse position, normalized to 0–1 from the bottom-left corner. Defaults to true.

number

Redraw rate in frames per second for animated shaders. When omitted, the shader redraws on every animation frame. 0 draws a single frame.

The web renderer compiles fragmentShader as a plain GLSL fragment shader: write void main(), read gl_FragCoord and the time, resolution and mouse uniforms, and write to gl_FragColor. A Shadertoy-style mainImage body fails to compile with Missing main() and renders a blank canvas.

Support

Usage

Solid color shader

Shader({
    fragmentShader: `void main() {
        gl_FragColor = vec4(0.2, 0.5, 1.0, 1.0);
    }`
})
    .frame({ width: 200, height: 200 })

Gradient shader

Shader({
    fragmentShader: `void main() {
        vec2 uv = gl_FragCoord.xy / resolution.xy;
        gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
    }`
})
    .frame({ width: 300, height: 200 })

Animated shader

Shader({
    fragmentShader: `void main() {
        vec2 uv = gl_FragCoord.xy / resolution.xy;
        float t = time * 0.5;
        vec3 col = 0.5 + 0.5 * cos(t + uv.xyx + vec3(0, 2, 4));
        gl_FragColor = vec4(col, 1.0);
    }`,
    timeEnabled: true
})
    .frame({ width: 300, height: 200 })

With custom uniforms

Shader({
    fragmentShader: `uniform float speed;
uniform vec3 baseColor;

void main() {
    vec2 uv = gl_FragCoord.xy / resolution.xy;
    float wave = sin(uv.x * 10.0 + time * speed);
    gl_FragColor = vec4(baseColor * (0.5 + 0.5 * wave), 1.0);
}`,
    uniforms: {
        speed: 2.0,
        baseColor: [1.0, 0.5, 0.0]
    },
    timeEnabled: true
})
    .frame({ width: 300, height: 200 })

Interactive shader

Shader({
    fragmentShader: `void main() {
        vec2 uv = gl_FragCoord.xy / resolution.xy;
        float d = distance(uv, mouse);
        float glow = 0.02 / d;
        gl_FragColor = vec4(glow * vec3(0.3, 0.6, 1.0), 1.0);
    }`,
    mouseEnabled: true
})
    .frame({ width: 300, height: 300 })

Notes

Shaders use WebGL. Built-in uniforms are resolution (canvas size in device pixels), time (seconds since start, unless timeEnabled is false), and mouse (normalized mouse position, unless mouseEnabled is false).
The Shader component is web-only. On iOS and Android, it will not render.
For best performance, keep shader complexity low and use updateInterval to throttle redraws when frame-perfect animation is not needed.

Introduction

Authoring

Components

Components — iOS Extensions

Components — Web Extensions

Modifiers

Modifiers — iOS Extensions

Hooks and Globals

Styles

Types

Support

Usage

Solid color shader

Gradient shader

Animated shader

With custom uniforms

Interactive shader

Notes

See Also

​Support

​Usage

​Solid color shader

​Gradient shader

​Animated shader

​With custom uniforms

​Interactive shader

​Notes

​See Also

Support

Usage

Solid color shader

Gradient shader

Animated shader

With custom uniforms

Interactive shader

Notes

See Also