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

​
Parameters

​
props
ShaderProps
Configuration options for the shader.

​
Support

​
Usage

​
Basic color shader

Shader({
    fragmentShader: `
        void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.5, 1.0);
        }
    `
})

​
Animated gradient

Shader({
    fragmentShader: `
        uniform vec2 u_resolution;
        uniform float u_time;

        void main() {
            vec2 uv = gl_FragCoord.xy / u_resolution;
            vec3 color = 0.5 + 0.5 * cos(u_time + uv.xyx + vec3(0, 2, 4));
            gl_FragColor = vec4(color, 1.0);
        }
    `,
    timeEnabled: true
})

​
Interactive shader with mouse

Shader({
    fragmentShader: `
        uniform vec2 u_resolution;
        uniform vec2 u_mouse;

        void main() {
            vec2 uv = gl_FragCoord.xy / u_resolution;
            vec2 mouse = u_mouse / u_resolution;

            float dist = distance(uv, mouse);
            vec3 color = vec3(1.0 - dist);

            gl_FragColor = vec4(color, 1.0);
        }
    `,
    mouseEnabled: true
})

​
Custom uniforms

Shader({
    fragmentShader: `
        uniform vec2 u_resolution;
        uniform float u_intensity;
        uniform vec3 u_color;

        void main() {
            vec2 uv = gl_FragCoord.xy / u_resolution;
            vec3 finalColor = u_color * u_intensity * uv.x;
            gl_FragColor = vec4(finalColor, 1.0);
        }
    `,
    uniforms: {
        u_intensity: 1.5,
        u_color: [0.2, 0.8, 1.0]
    }
})

​
Optimized animation

Shader({
    fragmentShader: `
        uniform vec2 u_resolution;
        uniform float u_time;

        void main() {
            vec2 uv = gl_FragCoord.xy / u_resolution;
            float wave = sin(uv.x * 10.0 + u_time) * 0.5 + 0.5;
            gl_FragColor = vec4(vec3(wave), 1.0);
        }
    `,
    timeEnabled: true,
    updateInterval: 33  // ~30fps for better performance
})

​
Sized shader

Shader({
    fragmentShader: `
        uniform vec2 u_resolution;

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

​
Built-in Uniforms

The following uniforms are automatically provided:
  • u_resolution (vec2): The size of the shader canvas in pixels
  • u_time (float): Elapsed time in seconds (if timeEnabled is true)
  • u_mouse (vec2): Mouse/touch position in pixels (if mouseEnabled is true)

​
Notes

  • Shaders run on the GPU and provide high-performance visual effects
  • Fragment shaders are executed for every pixel in the component
  • Use updateInterval to control animation frame rate and optimize performance
  • The coordinate system has (0,0) at the bottom-left corner