Open source shader component library
Join 19,000+ design engineers crafting magic with our production-ready WebGPU components. Create your own effects in our free design editor.
Stack 200+ components
to create your own shader
Combine simple building blocks into extraordinary effects for your website
Browse components Design in a visual editor.
Export to code for free.
Endless combinations of looks
Mix and match from a library of components. Stack, blend, mask, and transform layers to create unique effects without writing code.
Turn your own assets into shaders
Import your own images, videos, and SVG assets. Transform them into interactive shaders with advanced materials, filters and 3D effects.
Interactivity built-in
Drive any property with mouse movement, automatic animations, layer mapping, or reactive state from code.
Design on an infinite canvas
Layout multiple shaders on a single canvas. Compare variations side-by-side and explore concepts with just a few clicks.
Ship shader magic from
your agent or terminal
Search the shader library, install components, and keep them in sync with the design editor.
Find the perfect shader
Describe the look you want. Your agent searches the shader library, then installs and customizes the right shader in seconds.
Upgrade your brand assets
Adapt any shader to your content and design system, and turn your SVGs into shape effects.
Make any prop interactive
Connect shader properties to mouse movement, scroll, motion timelines, or reactive state in your app.
What developers say about Shaders
19,000+
design engineers crafting magic with production-ready WebGPU components.
“When anyone can crank out a decent looking page, shaders is what will take your designs to the next level. This is a fantastic tool to help you turn your creativity into those experiences.”
Wes BosSyntaxPRO
1,000 pro shaders,
new drops weekly
Unlock our extensive library of pro shader components, copy-and-paste section prompts for your agent, and every new drop.