Simon
Founder
Component library for creative WebGPU effects — 100+ ready-to-use shaders for React, Vue, Svelte, and more.
Freemium·WebGPU·Shaders·Components·Visual Effects·React
Freemium·WebGPU·Shaders·Components·Visual Effects+1
What is Shaders?
Shaders is a component library for building creative WebGPU visual effects in the browser. Choose from 100+ pre-built components including gradients, distortions, particles, and color manipulations, then compose them by stacking, nesting, masking, and blending. Works with React, Vue, Svelte, Solid, and vanilla JavaScript.
The visual design editor lets you create effects with drag-and-drop and export production-ready code. Includes MCP integration for AI agent workflows and curated preset collections on the Pro plan.
Features
- 100+ pre-built WebGPU shader components
- Works with React, Vue, Svelte, Solid, and vanilla JS
- Visual editor to design and export effects
- Stack, nest, mask, and blend components
FAQs
Common questions about Shaders
Is Shaders free?
Yes — the component library and basic editor are free. Pro unlocks curated presets and advanced features.
What frameworks does it support?
React, Vue, Svelte, Solid, and vanilla JavaScript.
Do I need to know GLSL or shader programming?
No — effects are pre-built components you can use and customize visually without writing shader code.
Insights
Traffic and momentum for Shaders
Loading chart…
Videos
Official videos and tutorials for Shaders.
20 tutorials
Similar to Shaders
6 similar picks
Paper Shaders
Ultra-fast, zero-dependency open-source shaders for your projects — as React components or GLSL.
Recraft for Framer
Framer plugin that lets you create and edit images with AI — generate visuals directly inside your Framer projects.
Shaders for Framer
Framer plugin that drops animated GPU shaders into your designs — gradients, noise, distortion, and other live visual effects without writing GLSL.
Metalforge
Visual editor for Metal shaders — tweak 48 effects with sliders, preview live via WebGPU, and export .metal files, SwiftUI components, or React Native Skia code.
Unicorn Studio
No-code WebGL tool — create enchanting visual effects, motion, and interactivity for Framer, Webflow, or any website.
AI Frame
AI agent, site builder, and content generator for Framer — automate landing pages, copy, FAQs, and conversion audits.
Team
The people behind Shaders
Ask AI about Shaders
Share
Similar Launches
Border Beam
A lightweight React component that renders an animated glowing border beam effect — multiple sizes, color variants, and themes.
Paper Shaders
Ultra-fast, zero-dependency open-source shaders for your projects — as React components or GLSL.
Loading UI
Free, open-source CSS and React loaders, spinners, and animations for building polished, accessible loading states.
Dot Matrix
Open-source React component library of 55+ expressive dot-matrix loaders — install via the shadcn registry and own the code locally.
ObsidianUI
Open-source React and Tailwind CSS component library of animated, interactive UI effects you can preview, copy, or install via the shadcn CLI.
Paperlab
Physical paper as a React component — real 3D sheets that peel, unroll, fold and hang, dialled in through a visual editor.
Comments