Documentation Index Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt
Use this file to discover all available pages before exploring further.
Shader ( props ?: { fragmentShader? : string ; uniforms ?: Record < string , number | number [] | boolean>; timeEnabled?: boolean ; mouseEnabled ?: boolean ; updateInterval ?: number ; }): Component ;
Configuration options for the shader. 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.
Whether to provide an auto-incrementing iTime uniform for animation. Defaults to false.
Whether to provide iMouse uniforms tracking touch/mouse position. Defaults to false.
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 })
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.
See Also 
