Note
This component was forked from Rysana's react-shaders and modified to work with the latest version of React and Next.js .
Usage
Features
- Easily create and render ShaderToy shaders in your React application
- Provide custom uniforms and textures
- Provide custom WebGL context attributes
Installation
pnpm dlx shadcn@latest add @agents-ui/agent-audio-visualizer-bar
Props
| Prop name | Type | Default |
|---|---|---|
fs | string | – |
vs? | string | `attribute vec3 aVertexPosition;
void main(void) {
gl_Position = vec4(aVertexPosition, 1.0);
}` |
textures? | TextureParams[] | [] |
uniforms? | Uniforms | – |
clearColor? | Vector4<number> | [0, 0, 0, 1] |
precision? | enum | highp |
style? | CSSProperties | – |
contextAttributes? | Record<string, unknown> |
|
lerp? | number | 1 |
devicePixelRatio? | number | 1 |
onDoneLoadingTextures? | function | – |
onError? | function | console.error |
onWarning? | function | console.warn |
animateWhenNotVisible? | boolean | – |