Yesterday we open sourced Shaders. Today your agent gets a skill for it 🔥 Run `npx shaders` in your project. It guides you through setting up Shaders and installing the official skill. Then just ask your agent to ship some shader magic and watch it work.

Big news. Shaders is now open source 🔥 Use any of our 200+ WebGPU components in your work. Ship magic in a client site, a template, a product, a library, anything. Plus, you can export code for any framework, for free. Give it a star: github.com/shader-effe...

Introducing the Shaders CLI 🔥 Connect your codebase to Shaders. Install shaders with one command, run "open" to edit visually in the browser, then "update" to pull your changes back into code.

Just gave Shaders a UI refresh ✨ Easier navigation for presets, sections, components, and docs. Cleaner layout, better exploration. Thanks to @vanjek for the inspo! Check it out: shaders.com

Interesting concept for riffing on coded prototypes while keeping explorations organized, by @vanjek The web clearly needs more gooey buttons 🔥 x.com/vanjek/stat...

Section Spotlight: Voxel Logo CTA Takes your logo and converts it into 3D voxels with a digital dithered look. Works great for CTAs that need a bit more attention 👀

Section Spotlight: Grid Shift Hero Subtle gradient background that shifts in a grid pattern as you move your cursor. Clean, modern look that adds just enough visual interest without overwhelming your content.

Section Spotlight: Irradiance Logo Hero Subtle hero section that takes your logo and applies realistic lighting and shading. Includes cursor-tracking light sources ✨

Section Spotlight: Polyhedron Footer Full-sized footer with a 3D prismatic light bleed effect.

New Voxels component just dropped ■ Renders any 2D/3D shape or your own SVG logo as voxels with realistic lighting and shading. Full control over voxel size, density, materials, and lighting setup.

Preset Spotlight: Pixel Ink Playing with the parameters on this one. Crank up the Wobble for a more technical glitch look, or adjust particle size and count to shift between dense and sparse vibes. Full gradient color cycle built in, or pick any colors you want 🎨

Wired up our Page Peel transition to cursor position for the "Shaders for React" hero section. The shader literally peels back to reveal components underneath 🔥

Excited to see Shaders used in the hero section 🔥 Props to @BarisGirismen for the epic work! x.com/dhh/status/...

New preset: Bad Projection 📽️ Drop in any SVG logo and turn it into heavily distorted digital projection. Built using our new Obsidian component, available under Shape Effects.

Got nerd-sniped by @matiNotFound's work and built this 🔦 WebGPU path-tracing in a compute shader pass. Supports multiple light sources with realistic light bounce and surface illumination. Bounce light around your logo. New Irradiance component available now.

New Nebula effect just dropped 🛰️ Space nebula clouds and stars trapped inside glass. Works with any 2D/3D shape or your own SVG logo.

Spent a few minutes building this Glass Ribbon effect in the design editor. The way the glass refraction wraps around the chrome layer gives it an interesting hourglass-like look ⌛

Section Spotlight: Terminal ASCII Footer Flowing ASCII text makes for a high-tech digital look. Customize character set, colors, sizing, etc. Get a prompt to deploy in one shot with your AI agent. shaders.com/sections/te...

Apple just announced their next event with this sunlight shader look. Spent an hour recreating it in Shaders. Now you can apply the same look to your logo. Link in the thread 🧵 x.com/gregjoz/sta...

Took our Specular Lines preset and tweaked the colors + glow a bit. Getting some nice prism vibes from this one ✨ shaders.com/collection/...

New Chrome component just dropped ✨ Upload any SVG logo and turn it into metallic chrome in seconds. Perfect for hero sections that need that extra polish.

Experimenting with Glass + the new MeshGradient component. The gradient flows underneath while the glass refracts it. Stack them together and you get some pretty wild 3D looks. Works especially well with logos 👀

The real magic happens when you stack effects. This demo layers two @paper shaders ported to WebGPU: "heatmap" + "lens distortion". Simple combination, crazy result.

You can now get those distorted, subtle-motion gradients for your next hero section background in seconds 👀 New MeshGradient component dropped today in v3.1.457. Drag it in, tweak props like color, seed, softness, etc. and ship it!

Introducing Shaders v3 🔥 Our biggest release yet. Built for design engineers who ship magic. Design production-ready WebGPU shader effects on an infinite canvas, powered by a new rendering engine that's up to 25× faster. shaders.com/updates/intr...

Introducing Shaders v3 — Shaders

Everything new in Shaders v3, from the redesigned editor to our lightweight TypeGPU rendering engine.

shaders.com

Exploring the new Glass effect, coming to the Shaders design editor in the near future...

Experimenting with a hero section with WebGPU components from shaders.com Using reactive props to change colors and animate a glitch effect between tabs. Magically easy to do ✨

Luxury details in 5 minutes flat...

Introducing Public Beta for Shaders ✨ The wait is over 🎉 Try it now for @vuejs.org , @react.dev , @svelte.dev & @solidjs.com

A big shout out to together.agency for creating the stunning new design and working closely with us to bring this vision to life. And to @marchantweb.com for implementing it so beautifully across all our sites, creating a dedicated theme package and nailing every detail.