Shader - Metabind

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

props

object

Configuration options for the shader.

Show properties

fragmentShader

string

Fragment shader source code in GLSL. The entry point should follow the Shadertoy convention: void mainImage(out vec4 fragColor, in vec2 fragCoord).

uniforms

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.

timeEnabled

boolean

Whether to provide an auto-incrementing iTime uniform for animation. Defaults to false.

mouseEnabled

boolean

Whether to provide iMouse uniforms tracking touch/mouse position. Defaults to false.

updateInterval

number

Update interval in milliseconds for animated shaders. Controls how often the shader redraws.

Support

Usage

Solid color shader

Shader({
    fragmentShader: `void mainImage(
        out vec4 fragColor, in vec2 fragCoord
    ) {
        fragColor = vec4(0.2, 0.5, 1.0, 1.0);
    }`
})
    .frame({ width: 200, height: 200 })

Gradient shader

Shader({
    fragmentShader: `void mainImage(
        out vec4 fragColor, in vec2 fragCoord
    ) {
        vec2 uv = fragCoord / iResolution.xy;
        fragColor = vec4(uv.x, uv.y, 0.5, 1.0);
    }`
})
    .frame({ width: 300, height: 200 })

Animated shader

Shader({
    fragmentShader: `void mainImage(
        out vec4 fragColor, in vec2 fragCoord
    ) {
        vec2 uv = fragCoord / iResolution.xy;
        float t = iTime * 0.5;
        vec3 col = 0.5 + 0.5 * cos(t + uv.xyx + vec3(0, 2, 4));
        fragColor = vec4(col, 1.0);
    }`,
    timeEnabled: true
})
    .frame({ width: 300, height: 200 })

With custom uniforms

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

void mainImage(
    out vec4 fragColor, in vec2 fragCoord
) {
    vec2 uv = fragCoord / iResolution.xy;
    float wave = sin(uv.x * 10.0 + iTime * speed);
    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 mainImage(
        out vec4 fragColor, in vec2 fragCoord
    ) {
        vec2 uv = fragCoord / iResolution.xy;
        vec2 mouse = iMouse.xy / iResolution.xy;
        float d = distance(uv, mouse);
        float glow = 0.02 / d;
        fragColor = vec4(glow * vec3(0.3, 0.6, 1.0), 1.0);
    }`,
    mouseEnabled: true
})
    .frame({ width: 300, height: 300 })

Notes

Shaders use WebGL and follow the Shadertoy convention. Built-in uniforms include iResolution (viewport size), iTime (elapsed time when timeEnabled is true), and iMouse (pointer position when mouseEnabled is true).
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.

​Support

​Usage

​Solid color shader

​Gradient shader

​Animated shader

​With custom uniforms

​Interactive shader

​Notes

​See Also