Shaders for Svelte, composed in markup.
200+ shader components, TypeScript ready. Compose in your codebase, or design in the editor and export for Svelte.
Compatible with Svelte 5 and SvelteKit
Ship a shader as easily as you ship a button.
Every effect in Shaders is a Svelte 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 Svelte 5 and SvelteKit.
components/GlassBackground.svelte
<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. The Svelte Shader component is SSR-aware: on the server it renders nothing, no canvas and no error, and the GPU initializes on mount, so most SvelteKit routes need no extra handling. For an explicit server-side placeholder, wrap it in an if block on browser from $app/environment. Read the SvelteKit guide
Yes. Shaders has no SvelteKit dependency. It needs Svelte 5 and a browser. In a client-rendered Vite app you import and render. In other server-rendered setups, render the shader after mount behind an onMount flag.
No. You work with components and props. The shaders themselves are written and tuned by us, and the renderer compiles them for the GPU when the component mounts.
Yes. shaders/svelte ships type declarations, and every component has typed props, so svelte-check flags a misspelled prop or a wrong value type before it reaches the browser.
Svelte 5. The components are built on runes, and props accept $state values directly, so a rune bound to a prop updates the shader with no wrapper or store in between.
Yes. The canvas has no intrinsic size. Whatever class or style you put on the Shader component controls its size and position, so w-full and aspect-video work the way you expect.
The canvas stays transparent, onready never fires, and nothing is written to the console. The onunavailable callback fires once so you can render your own fallback, such as a gradient or an image. WebGPU is supported in all major modern browsers. Check your browser
Effects render on the GPU, and 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 MCP connects Cursor, Claude Code, Codex, and other MCP-compatible agents to your account and the preset library. Your agent can search presets, install them into your Svelte codebase, and wire props to your state. Set up Shaders MCP
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. The Svelte Shader component is SSR-aware: on the server it renders nothing, no canvas and no error, and the GPU initializes on mount, so most SvelteKit routes need no extra handling. For an explicit server-side placeholder, wrap it in an if block on browser from $app/environment. Read the SvelteKit guide
No. You work with components and props. The shaders themselves are written and tuned by us, and the renderer compiles them for the GPU when the component mounts.
Svelte 5. The components are built on runes, and props accept $state values directly, so a rune bound to a prop updates the shader with no wrapper or store in between.
The canvas stays transparent, onready never fires, and nothing is written to the console. The onunavailable callback fires once so you can render your own fallback, such as a gradient or an image. WebGPU is supported in all major modern browsers. Check your browser
Yes. Shaders MCP connects Cursor, Claude Code, Codex, and other MCP-compatible agents to your account and the preset library. Your agent can search presets, install them into your Svelte codebase, and wire props to your state. Set up Shaders MCP
Yes. Shaders has no SvelteKit dependency. It needs Svelte 5 and a browser. In a client-rendered Vite app you import and render. In other server-rendered setups, render the shader after mount behind an onMount flag.
Yes. shaders/svelte ships type declarations, and every component has typed props, so svelte-check flags a misspelled prop or a wrong value type 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, so w-full and aspect-video work the way you expect.
Effects render on the GPU, and 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