Simon Le Marchant

shaders.comIntroducing Shaders v3 — ShadersEverything new in Shaders v3, from the redesigned editor to our lightweight TypeGPU rendering engine.

14 July

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...

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.

skills.shshaders — shader-effects-inc/shadersBuild WebGPU visual effects with the Shaders component library (npm `shaders`) in React, Vue, Svelte, Solid or vanilla JS. Use when a user asks for a shader,…

Skill: www.skills.sh/shader-effe...

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...

Today's coding agents can write shaders, but the output is still raw WGSL code that may not perform well when deployed in real-world projects. With Shaders, agents can now build on production-tested components instead: better shaders, faster workflow, real performance.

shaders.comShaders is now open source — ShadersThe Shaders rendering engine, every shader component, and the framework bindings are now MIT licensed on GitHub. Code export in the design editor is free for everyone.

Read the announcement: shaders.com/updates/sha...

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.

shaders.comIntroducing the Shaders CLI — ShadersInstall shaders and presets straight into your codebase with one command, keep them in sync with the design editor, and jump back into your project from the terminal.

Read the full announcement: shaders.com/updates/int...

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

22 Sept

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

17 Sept

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 👀

shaders.comVoxel Logo CTA — Sections — ShadersA near-black end-of-page call-to-action where the brand mark is extruded into a slowly rocking 3D voxel solid right of center, ringed by motion-tracking markers and dithered down to two inks — mint on near-black — beside a left-aligned headline and two buttons.

17 Sept

Get a prompt to deploy with your AI agent: shaders.com/sections/vo...

15 Sept

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.

shaders.comGrid Shift Hero — Sections — ShadersA bright full-bleed hero for a payments platform — a lagoon-toned flowing gradient, sliced into soft vertical bars and a coarse grid whose cells slide under the cursor and settle back, under a deep-navy headline that pairs a light narrow opening line with a black extra-wide closing line.

15 Sept

Get a prompt to deploy with your AI agent: shaders.com/sections/gr...

14 Sept

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

shaders.comIrradiance Logo Hero — Sections — ShadersA violet full-viewport hero where the brand mark sits oversized in the bottom-right corner, cropped by the frame — a white solid whose rim is struck by three cursor-tethered coloured lights (magenta, indigo, orange) that flood the field around it — beside a left-aligned Clash Display headline, one supporting line, and two buttons.

14 Sept

Get a prompt to deploy with your AI agent: shaders.com/sections/ir...

10 Sept

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

shaders.comPolyhedron Footer — Sections — ShadersA tall near-black mega footer where a giant dark dodecahedron rises from the bottom edge like a planet at dawn — violet glow pooling behind it, facet edges traced in blue-to-chartreuse contour light, the whole scene bending gently around the cursor — beneath a right-aligned closing line, a brand column with a newsletter field, four link columns, and a hairline legal bar.

10 Sept

Get a prompt to deploy with your AI agent: shaders.com/sections/po...

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.

shaders.comVoxel Lamp — ShadersExplore Voxel Lamp shader variants. Customize in the design editor and export code for Vue, React, Svelte, Solid & JS.

Here's one example of what's possible using Voxels: shaders.com/collection/...

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 🎨

shaders.comPixel Ink — ShadersPixel Ink. Open in the design editor to customize and export code for your project.

Try it live: shaders.com/collection/...

8 Sept

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 🔥

shaders.comReact Shaders: WebGPU shader components for React and Next.jsShaders for React, composed in JSX. 200+ WebGPU shader components, TypeScript ready. Compose in your codebase, or design in the editor and export for React. Compatible with React 18, 19 and Next.js.

8 Sept

See it in action: shaders.com/react

7 Sept

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

7 Sept

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.

shaders.comBad Projection — ShadersBad Projection. Open in the design editor to customize and export code for your project.

7 Sept

Try it with your own logo: shaders.com/collection/...

2 Sept

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.

shaders.comBouncy Light Logo — ShadersExplore Bouncy Light Logo shader variants. Customize in the design editor and export code for Vue, React, Svelte, Solid & JS.

2 Sept

Try Irradiance with your own logo: shaders.com/collection/...

1 Sept

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

shaders.comNebula Logo — ShadersNebula Logo. Open in the design editor to customize and export code for your project.

1 Sept

Try it with your own logo: shaders.com/collection/...

31 Aug

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 ⌛

shaders.comGlass Ribbon — ShadersExplore Glass Ribbon shader variants. Customize in the design editor and export code for Vue, React, Svelte, Solid & JS.

31 Aug

Preset available for Pro users: shaders.com/collection/...

27 Aug

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...

shaders.comSunlight Surprise — ShadersExplore Sunlight Surprise shader variants. Customize in the design editor and export code for Vue, React, Svelte, Solid & JS.

Try it with your own SVG logo: shaders.com/collection/...

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.

shaders.comChrome Logo — ShadersExplore Chrome Logo shader variants. Customize in the design editor and export code for Vue, React, Svelte, Solid & JS.

Try it with your own logo: shaders.com/collection/...

25 Aug

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 👀

24 Aug

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

shaders.comHeated Shapes — ShadersExplore Heated Shapes shader variants. Customize in the design editor and export code for Vue, React, Svelte, Solid & JS.

24 Aug

Want to try this yourself? We've added a collection of various shapes to get started, or you can drop in your own SVG file to apply it to your logo. Get them here: shaders.com/collection/...

21 Aug

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!

shaders.comMesh Flow — ShadersExplore Mesh Flow shader variants. Customize in the design editor and export code for Vue, React, Svelte, Solid & JS.

21 Aug

Looking for inspiration or a starting point? Check out this "Mesh Flow" collection: shaders.com/collection/...

3 Mar

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

23 Feb

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 ✨

11 Feb

Luxury details in 5 minutes flat...

shaders-demo-aurelia.bolt.hostAurélia | Fine Jewelry

11 Feb

Play with the live demo at: shaders-demo-aurelia.bolt.host