For Tailwind CSS v3 docs, click here.

Shader Toy Viewer

A powerful and flexible component to render interactive GLSL shaders from ShaderToy in the browser.

API

Prop NameTypeDefaultDescription
shaderCodestring-GLSL fragment shader source code from ShaderToy.
mouseMode'click' | 'hover''click'Mouse tracking mode: either on click or continuous hover.
huenumber0Adjust the hue of the shader output.
saturationnumber1Adjust the saturation of the shader output.
brightnessnumber1Adjust the brightness of the shader output.
speednumber1Adjust the speed of the shader output.
classstring-Custom classes to apply to the container.

Installation

Make sure to include and install ogl (for rendering) in your project.

npm
pnpm
bun
yarn
npm i ogl

Install using CLI

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://registry.inspira-ui.com/shader-toy.json"

Install Manually

Copy and paste the following code:

ShaderToy.vue
InspiraShaderToy.ts

Features

  • Shadertoy-Compatible: Supports Shadertoy-style mainImage, iTime, iResolution, iMouse, and more.
  • GLSL Shader Rendering: Render full-featured ShaderToy-like fragment shaders.
  • iMouse Support: Interactive shaders with real-time mouse input (click or hover).
  • HSV Color Control: Dynamically adjust shader hue, saturation, and brightness.
  • Responsive Design: Automatically adjusts canvas size with container resizing.
  • Runtime Control: Play, pause, and reset shaders dynamically.

Notes

  • Converts and wraps Shadertoy-style shaders to work in a WebGL2 environment.
  • Color control (hue, saturation, brightness) is applied as a post-processing step to simulate HSV adjustments.

Credits

  • Built with OGL.
  • Inspired by Shadertoy and adapted for Vue compatibility.