Choose your plan to unlock shader magic

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.

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 proprietary 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 and the full Pro preset library. 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

Shaders is free to try — sign up to explore the design editor, browse presets, and install the npm package to experiment in your own projects. Commercial or production use requires Core or Pro (see plans above). Core unlocks code export, video and image export, version history, and the Shaders MCP for AI agents, for anything you build from scratch plus free-designated presets and sections. Pro adds the full preset and sections library and priority support.

Evaluation use is free. Any commercial or production deployment (client work, SaaS products, internal tools, or public-facing sites) requires an active Core or Pro subscription. View license terms

Yes. Our Resources hub includes step-by-step guides and reference material to help you go from first install to advanced compositions. Explore resources

Yes. Shaders has an active Discord community where you can ask questions, share work, and get help directly. Join our Discord