Shaders for Vue, made composable.
200+ shader components, TypeScript ready. Compose in your codebase, or design in the editor and export for Vue.
Compatible with Vue 3.5+ and Nuxt 3+
Ship a shader as easily as you ship a button.
Every effect in Shaders is a Vue component. Install the package, import, and compose shaders the same way you compose the rest of your UI. Props are type-safe, and any prop can be bound to reactive state. Compatible with Vue 3.5+ and Nuxt 3+.
components/GlassBackground.vue
<GlassBackground />
Mix and match components
Stack, nest, mask and blend them to design new unique looks.
Production-ready
Every component is optimized for performance out of the box.
Fully reactive
Bind any prop to state. Drive animations reactively.
Design in a pro-grade editor. Export to your codebase.
FAQsInstalling and usage
Yes. Shaders runs on WebGPU, so it only renders in the browser. Wrap the shader in Nuxt's ClientOnly component: nothing renders on the server, the canvas mounts after hydration, and a fallback slot can hold the space while it loads. There is no hydration mismatch, because a canvas has no server-rendered content to compare. Read the Nuxt guide
Yes. Shaders has no Nuxt dependency. It needs Vue 3.5 or later and a browser. In a client-rendered Vite app you import and render. In Vue SSR without Nuxt, render the shader behind a mounted flag with v-if so it never runs on the server.
Bind the prop like any other prop. Put a ref or a computed behind :speed, :color-a, or any numeric or color prop, and when it changes the renderer writes the new value to the GPU as a uniform on the next frame. v-model on a range input, a watch, or a Pinia store all work, with no recompile and no flicker.
Vue 3.5 and later. The components are standard Vue components, so they work in script setup, in Options API components, and inside your own wrapper components and slots.
Yes. Register them in a plugin with a .client.ts suffix, so the plugin only runs in the browser, and every page can use the tags without importing them. Importing per component keeps bundles smaller, so use the plugin when convenience matters more. Plugin example
Yes. shaders/vue ships type declarations, and every component has typed props, so vue-tsc and Volar flag a misspelled prop or a wrong value type in your template before it reaches the browser.
Yes. The canvas has no intrinsic size. Whatever class or style you put on the Shader component controls its size and position, including scoped styles, so w-full and aspect-video work the way you expect.
The canvas stays transparent, the ready event never fires, and nothing is written to the console. The unavailable event fires once, so you can flip a ref and render a fallback with v-if, such as a gradient or an image. WebGPU is supported in all major modern browsers. Check your browser
Effects render on the GPU, and reactive prop changes write uniforms without recompiling. The renderer is built on TypeGPU rather than a general-purpose 3D engine, so shaders compile roughly 25x faster on the client than Three.js-based alternatives, and canvases scrolled out of view drop to about one frame per second. Performance guide
Shaders is free to try. Install the package, explore the design editor, and experiment in your own projects. Commercial or production use requires a Core or Pro plan. See pricing
Yes. Shaders runs on WebGPU, so it only renders in the browser. Wrap the shader in Nuxt's ClientOnly component: nothing renders on the server, the canvas mounts after hydration, and a fallback slot can hold the space while it loads. There is no hydration mismatch, because a canvas has no server-rendered content to compare. Read the Nuxt guide
Bind the prop like any other prop. Put a ref or a computed behind :speed, :color-a, or any numeric or color prop, and when it changes the renderer writes the new value to the GPU as a uniform on the next frame. v-model on a range input, a watch, or a Pinia store all work, with no recompile and no flicker.
Yes. Register them in a plugin with a .client.ts suffix, so the plugin only runs in the browser, and every page can use the tags without importing them. Importing per component keeps bundles smaller, so use the plugin when convenience matters more. Plugin example
Yes. The canvas has no intrinsic size. Whatever class or style you put on the Shader component controls its size and position, including scoped styles, so w-full and aspect-video work the way you expect.
Effects render on the GPU, and reactive prop changes write uniforms without recompiling. The renderer is built on TypeGPU rather than a general-purpose 3D engine, so shaders compile roughly 25x faster on the client than Three.js-based alternatives, and canvases scrolled out of view drop to about one frame per second. Performance guide
Yes. Shaders has no Nuxt dependency. It needs Vue 3.5 or later and a browser. In a client-rendered Vite app you import and render. In Vue SSR without Nuxt, render the shader behind a mounted flag with v-if so it never runs on the server.
Vue 3.5 and later. The components are standard Vue components, so they work in script setup, in Options API components, and inside your own wrapper components and slots.
Yes. shaders/vue ships type declarations, and every component has typed props, so vue-tsc and Volar flag a misspelled prop or a wrong value type in your template before it reaches the browser.
The canvas stays transparent, the ready event never fires, and nothing is written to the console. The unavailable event fires once, so you can flip a ref and render a fallback with v-if, such as a gradient or an image. WebGPU is supported in all major modern browsers. Check your browser
Shaders is free to try. Install the package, explore the design editor, and experiment in your own projects. Commercial or production use requires a Core or Pro plan. See pricing