Build shaders you're actually proud to ship.

Learn the techniques behind standout web visuals — hero backgrounds, cursor effects, raymarched scenes — with full breakdowns and copy-paste code in Three.js and TSL.

Get the course ↵

From $99 · one-time payment · 30-day money-back guarantee

Try a free lesson ↓See what you'll learn ↓

Learning shaders is hard. Most tutorials leave you stuck the moment you try to build something real.

Fragments closes that gap — real techniques, reusable tools and deep breakdowns, not toy examples.

Go from fundamentals to shaders you're proud to ship.

Loved by the developers building with it.

“I really appreciate Ben’s work and the effort he puts into making shaders more understandable, and applicable. The resources are growing fast, and he keeps consistently delivering new examples, tips, and tricks. 🔥”
Robert BabińskiFrontend Developer
“Knowing shaders is your unreasonable advantage in UI. Ben has worked super hard on this course, recommended!”
Joshua CrowleyDesigner and Educator

Eidolon 3A shader exploring rotating shapes and gradients

Fractal 4 — Cascade 4A kaleidoscopic fractal shader utilising shearing matrices

12 essential shader patterns — the building blocks behind the visuals you've been dreaming about.

Not sure yet? Try the Geometric Shapes lesson for free and see exactly how a Fragments breakdown works.

What you'll be able to build.

If you're a design engineer ↓

Make yourself an invaluable asset to your team by creating experiences and visuals that really stand out in a world of sameness.

Hero sections and product experiences
Cursor effects and responsive canvases
Particles and flow fields at 60fps
Ship without hiring specialists

If you're a creative coder ↓

Create one-of-a-kind visuals, animations and interactive experiences, powered by shaders. Learn new techniques to express your creativity.

Noise, geometry, procedural color
Copy-paste utilities and mental models
Real sketches with full breakdowns

If you're a shader artist ↓

Be inspired by new techniques and learn how to experiment with them to create unique experiences that you may have never seen before.

Raymarching, SDFs, procedural aesthetics
Procedural color and noise-driven patterns
Copy-paste utilities and pro mental models

Warp 1 - A shader exploring domain warping

Shift 4 - A shader exploring pixel sorting techniques

Everything you need to go from foundational to advanced.

Long-form lessons on creative coding techniques, built with React Three Fiber (or vanilla), Three.js and TSL.

Long-form technique lessons12
Deep, step-by-step breakdowns of each technique with copy-pasteable implementations you can drop straight into your own work.
Fundamental concept lessons7
The mental models that make everything else click — from debugging shaders to building generative systems.
Workflow-enhancing utilities44+
A growing toolkit of copy-paste TSL utilities so you spend time creating, not re-writing boilerplate.
Full shader breakdowns171+
Fully commented source for every shader, so you're never staring at a blank file wondering where to start.
Downloadable projects and boilerplates
Every technique ships with downloadable R3F and vanilla starters. Clone, remix, ship.
Community Discord
A private Discord community to get help, share work, and connect with other shader coders.

Choose your plan.

What's included in the course ↓

Access to the course: master shader techniques, use workflow-enhancing utilities, learn from shader breakdowns with full code, and get downloadable R3F and vanilla projects.

One single payment. No subscription required. 30-day money-back guarantee. No questions asked.

Not sure which to pick? Most people choose Pro for the full collection and all future updates. Fundamentals is a focused, lower-cost starting point you can upgrade from any time.

“Knowing shaders is your unreasonable advantage in UI. Ben has worked super hard on this course, recommended!”

Joshua Crowley · Designer and Educator

Flare 5 — Shift 7 - A shader exploring pixel sorting techniques

I'm Ben — a design engineer and creative coder.

A little about me ↓

I've been making things with code for over 20 years and hit a million dead ends along the way. I've written shader tutorials for Codrops and share my work daily on X. The more I made, the better things got — I just wish it had been easier to get started.

Fragments is the platform I wish I had when I was starting out — leverage the research and experimentation I've done over the last few years to supercharge your workflow.

Some things I've made ↓

Shadercraft
Curated shader art, learning, inspiration and the people that make it happen
Formation
Generative, algorithmic shader experiences coalesced from the void
How to create a liquid raymarching scene
A tutorial on how to create a liquid raymarching scene using ThreeJS Shading Language

Got questions? Here's something that might help.

Frequently Asked Questions

Ready to build shaders you're proud to ship?

From $99 · one-time payment · 30-day money-back guarantee. Join 232+ developers already learning with Fragments.

Get the course ↵Try a free lesson ↓