Shaders

The design platform for web shaders

41 followers

The design platform for web shaders

41 followers

Visit website

Interface design tools

•

UI frameworks

Shaders is the design platform for web shaders. Create stunning WebGPU-powered effects with a pro-grade visual editor, then export clean component code for Vue, React, Svelte, Solid, JavaScript, and Framer. Trusted by 10,000+ design engineers to ship beautiful, production-ready frontend experiences.

Free Options

Launch tags:Design Tools•Developer Tools•Graphics & Design

Launch Team / Built With

Wispr Flow: Dictation That Works EverywhereStop typing. Start speaking. 4x faster.

Promoted

Maker

📌

Hey Product Hunt 👋 I'm Simon, the founder of @Shaders. I was previously at Clerk, and 15+ years of freelance before that. I started Shaders because there was a huge gap between modern frontend development and shader programming. On one side you have reusable components, props, and composition. On the other, GLSL, WGSL, and graphics math; I'm not a fan of trigonometry. Shaders was built to bridge that gap make creative effects easy for design engineers. What began about 18 months ago as a small prototype built on Three.js TSL has grown into a complete design platform. We opened the public beta in February, and we've been shipping improvements every week since. Here's how it works: 1. Design a shader by mixing and matching from 160+ shader components. You can mask, blend, and customize countless props. Bring in your own media or generate 3D effects from your SVG logo. 2. Once you're happy, install the Shaders MCP and ask your agent to install the shader in your project. All code is production-ready, using components delivered via our npm package; it's as simple as that. 3. Go grab a drink or something, you're done. There's no need for a third step. Today's launch is our biggest release yet. We've introduced a completely redesigned visual editor, built an all-new rendering engine powered by TypeGPU that's dramatically faster and lighter, expanded the component library, and made it easier than ever to go from idea to production-ready code in minutes. More than 10,000 design engineers use Shaders to build interactive websites and ship GPU-powered experiences. Try it out yourself for free at https://shaders.com I'd love to hear your thoughts, answer any questions, or get feedback on where we should take Shaders next. Thanks so much for checking it out! ❤️

Report

2mo ago

Awesome app and shaders, keep it up!

I've been playing around with it and loving the available export options. Would love to see a WP plugin as well for a seamless integration.

Report

2mo ago

Maker

@yo_zuber WordPress is something we're actively considering, and have had a few discussions around. It seems like it would be rather straightforward to port our underlying `shaders/js` package to the WP platform.

Report

2mo ago

@simon_at_shaders that's great to know, can't wait to see an update on this.

Report

2mo ago

the editor itself looks incredibly polished, especially how smooth the live preview updates while tweaking shaders in real time. honestly the export-to-any-framework approach is kind of brilliant, feels like they actually thought about how design engineers actually work day to day.

Report

2mo ago

Maker

@duyguekinnq1t Funny enough, we didn't even plan on building an editor initially. Shaders started as a component library, and the editor naturally emerged once we wanted to start playing with different props for those components in a visual way.

Report

2mo ago

Reviews