React Shader Toy | LiveKit Documentation

Note

This component was forked from Rysana's react-shaders and modified to work with the latest version of React and Next JS.

Usage

Code

'use client';

import { ReactShaderToy } from '@/components/agents-ui/react-shader-toy';

const fs = `
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
  vec2 uv = fragCoord/iResolution.xy;
  vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
  fragColor = vec4(col,1.0);
}
`;

export function Demo() {
  return <ReactShaderToy fs={fs} />;
}

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