Ship magic with Shaders Pro.
Free
Every open source component, the design editor, and code export.
Get started with shader magic
- 210+ components
- Vue, React, Svelte, Solid, JS
- Export from the Design Editor
- Unlimited design and export
- CLI + MCP workflows
- Export code however you want
- Personal or commercial
- MIT licensed, fully open
Open source and free forever.
Pro
Most PopularFor professionals who ship magic every day.
Unlock the complete Pro library
- 750+ production-ready presets
- Curated and constantly expanding
- 55+ ready-to-use website sections
- Copy & paste prompts for your AI agent
- Render HD videos & images
- High quality, no watermark
- Presets in Framer, the CLI and MCP
- Install from the library wherever you build
- Unlimited version history
- Keep your work safe as you explore
- Exclusive Discord role & channel
- Connect with pros and the team
- All future updates
- New features, improvements, always
- Priority support
- Get help when you need it
Cancel anytime.
Used by frontend teams at
FAQsFrequently asked questions
Shaders is a production-ready component system for building WebGPU-powered visual effects in the frontend. You compose effects like UI components, art-direct them visually in the design editor, and ship optimized, real code in your app.
Yes. The rendering engine, every shader component, and the Vue, React, Svelte, Solid, and JS bindings are MIT licensed. It's the same code that ships in the `shaders` npm package, so you can read it, fork it, and contribute. View on GitHub
No. Shaders is built for frontend developers and design engineers. You work with familiar components and props—no shader math, no low-level graphics code.
Vue, React, Svelte, Solid, JS & Framer. Nuxt and Next are supported as long as the Shader component is rendered client-side.
Shaders is an npm package. Install it with `npm i shaders`, import the components into your app, and compose effects directly in your code. For Framer, you can use the official plugin
You export a framework-native component that mirrors what you designed—using the same Shaders components and props—ready to drop into your codebase.
Shaders runs on our own custom-built renderer targeting WebGPU exclusively — there's no WebGL fallback. Dropping WebGL let us build a leaner, faster engine that takes full advantage of modern GPU APIs instead of carrying the compromises of a decade-old graphics standard. WebGPU is supported in all major modern browsers.
We've spent hundreds of hours—and burned through countless AI tokens—hand-optimizing every shader down to the pixel, so effects stay lightweight enough for real production workloads. Our open-source rendering engine is built directly on TypeGPU rather than a general-purpose 3D engine, giving Shaders roughly 25x faster client-side compile times than Three.js-based alternatives, so effects appear almost instantly instead of stalling your page on first paint.
Some effects include built-in motion or interaction, and all components support fully reactive props—so you can drive them with scroll, pointer, time, or animation libraries. Most props can also be driven by mouse position via the design editor, or set to animate automatically.
Yes, you can use your logo, images, video, and even live webcam input as textures, making it easy to build stunning custom visuals, hero backgrounds, and interactive UI elements.
The Shaders MCP server connects your AI coding agent directly to your Shaders account: your own designs, and the Pro preset library if you're on Pro. Your agent can search and browse presets, install them into your codebase, customize props and wire them up to reactive state, and even generate SDFs from your SVG files — all without leaving your editor. Learn about the MCP
Any agent that supports the Model Context Protocol (MCP) works with Shaders. This includes Claude Code, Cursor, Codex, Antigravity, Windsurf, and Lovable, among others. Setup takes one command or a small JSON config — connect via OAuth or an API key. View setup instructions
The npm package, the design editor, and code export are free for everyone, including commercial use. Pro is the library and the workflow around it: the full preset and sections collection, projects and version history, video export without a watermark, installing Pro presets through the CLI, MCP, and Framer, and priority support.
Pro is one plan with two ways to pay: annual, or Lifetime — a single one-time payment with no renewal. Both include the same features and the full library. Annual can be cancelled at any time, with access continuing to the end of the billing period. Regional pricing applies to both where available.
Yes. The engine, components, and framework bindings are MIT licensed, so client work, SaaS products, internal tools, and public-facing sites are all fine without a paid plan. Pro presets and sections are licensed separately for use in your own projects. View license terms
Yes. The docs cover installing Shaders, composing effects in code, video lessons on the design editor, and a reference page for every component. Read the docs
Yes. Shaders has an active Discord community where you can ask questions, share work, and get help directly. Join our Discord
Shaders is a production-ready component system for building WebGPU-powered visual effects in the frontend. You compose effects like UI components, art-direct them visually in the design editor, and ship optimized, real code in your app.
No. Shaders is built for frontend developers and design engineers. You work with familiar components and props—no shader math, no low-level graphics code.
Shaders is an npm package. Install it with `npm i shaders`, import the components into your app, and compose effects directly in your code. For Framer, you can use the official plugin
Shaders runs on our own custom-built renderer targeting WebGPU exclusively — there's no WebGL fallback. Dropping WebGL let us build a leaner, faster engine that takes full advantage of modern GPU APIs instead of carrying the compromises of a decade-old graphics standard. WebGPU is supported in all major modern browsers.
Some effects include built-in motion or interaction, and all components support fully reactive props—so you can drive them with scroll, pointer, time, or animation libraries. Most props can also be driven by mouse position via the design editor, or set to animate automatically.
The Shaders MCP server connects your AI coding agent directly to your Shaders account: your own designs, and the Pro preset library if you're on Pro. Your agent can search and browse presets, install them into your codebase, customize props and wire them up to reactive state, and even generate SDFs from your SVG files — all without leaving your editor. Learn about the MCP
The npm package, the design editor, and code export are free for everyone, including commercial use. Pro is the library and the workflow around it: the full preset and sections collection, projects and version history, video export without a watermark, installing Pro presets through the CLI, MCP, and Framer, and priority support.
Yes. The engine, components, and framework bindings are MIT licensed, so client work, SaaS products, internal tools, and public-facing sites are all fine without a paid plan. Pro presets and sections are licensed separately for use in your own projects. View license terms
Yes. Shaders has an active Discord community where you can ask questions, share work, and get help directly. Join our Discord
Yes. The rendering engine, every shader component, and the Vue, React, Svelte, Solid, and JS bindings are MIT licensed. It's the same code that ships in the `shaders` npm package, so you can read it, fork it, and contribute. View on GitHub
Vue, React, Svelte, Solid, JS & Framer. Nuxt and Next are supported as long as the Shader component is rendered client-side.
You export a framework-native component that mirrors what you designed—using the same Shaders components and props—ready to drop into your codebase.
We've spent hundreds of hours—and burned through countless AI tokens—hand-optimizing every shader down to the pixel, so effects stay lightweight enough for real production workloads. Our open-source rendering engine is built directly on TypeGPU rather than a general-purpose 3D engine, giving Shaders roughly 25x faster client-side compile times than Three.js-based alternatives, so effects appear almost instantly instead of stalling your page on first paint.
Yes, you can use your logo, images, video, and even live webcam input as textures, making it easy to build stunning custom visuals, hero backgrounds, and interactive UI elements.
Any agent that supports the Model Context Protocol (MCP) works with Shaders. This includes Claude Code, Cursor, Codex, Antigravity, Windsurf, and Lovable, among others. Setup takes one command or a small JSON config — connect via OAuth or an API key. View setup instructions
Pro is one plan with two ways to pay: annual, or Lifetime — a single one-time payment with no renewal. Both include the same features and the full library. Annual can be cancelled at any time, with access continuing to the end of the billing period. Regional pricing applies to both where available.
Yes. The docs cover installing Shaders, composing effects in code, video lessons on the design editor, and a reference page for every component. Read the docs