Back

Siri GLSL Wave

Component Code (Next.js)

Use Copy Code to load the current local source for the Siri GLSL wave component.

Claude / Codex Prompt

Create a React component from the Siri GLSL reference:
- Use a canvas with vanilla WebGL, no animation libraries.
- Port the wave and fluid dots fragment shaders into TypeScript string constants.
- Provide a segmented control for switching between Wave and Fluid Dots.
- Handle shader compile/link errors with an inline fallback.
- Resize the canvas using ResizeObserver and keep the shader pixel ratio controlled for performance.
- Respect prefers-reduced-motion by rendering a static frame instead of running a continuous animation.
- Fit the component into the existing ComponentShell page pattern.