Learn the shader techniques that set you apart.

For design engineers, creative coders and shader artists: techniques, tools, deep dives. Powered by ThreeJS and TSL.

Enrollment opens May 15 2026 ↵

See what you'll learn ↓

Learning shaders is hard. Most tutorials leave you stuck when building something real.

This course bridges the gap: techniques, tools, and deep dives in TSL and Three.js.

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

Eidolon 3A shader exploring rotating shapes and gradients

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

Learn 12 essential shader patterns. Build the visuals you've been dreaming about.

For design engineers, creative coders and shader artists to take their skills to the next level.

For Design Engineers ↓

Make yourself an invaluable asset to your team by learning how to create 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

For Creative Coders ↓

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

For Shader Artists ↓

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

Take your shader skills 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 explanations and breakdowns of underlying techniques with copy-pasteable implementations and examples.
Fundamental concept lessons6
Learn the fundamentals of creative coding with shaders. From debugging to generative systems.
Workflow enhancing Utilities44+
A collection of utilities to streamline your TSL workflow with copy-pasteable implementations.
Full Shader Breakdowns171+
Fully commented source code and breakdowns of every shader and technique in Fragments.
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 shader coders.

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

Fragments will be open for enrollment on May 15 2026.

Fragments will be open for enrollment on May 15 2026 ↓

Join the waitlist to get notified when enrollment opens.

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

A little about me ↓

I've been making things with code for over 20 years. Hit a million dead ends along the way. The more I made, the better things got, but I wish it was 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

Learn the shader techniques that set you apart.

For design engineers, creative coders and shader artists: techniques, tools, deep dives. Powered by ThreeJS and TSL.

Enrollment opens May 15 2026 ↵

See what you'll learn ↓

Learning shaders is hard. Most tutorials leave you stuck when building something real.

This course bridges the gap: techniques, tools, and deep dives in TSL and Three.js.

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

Eidolon 3A shader exploring rotating shapes and gradients

Learn 12 essential shader patterns. Build the visuals you've been dreaming about.

For design engineers, creative coders and shader artists to take their skills to the next level.

For Design Engineers ↓

Make yourself an invaluable asset to your team by learning how to create 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

For Creative Coders ↓

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

For Shader Artists ↓

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

Take your shader skills 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 explanations and breakdowns of underlying techniques with copy-pasteable implementations and examples.
Fundamental concept lessons6
Learn the fundamentals of creative coding with shaders. From debugging to generative systems.
Workflow enhancing Utilities44+
A collection of utilities to streamline your TSL workflow with copy-pasteable implementations.
Full Shader Breakdowns171+
Fully commented source code and breakdowns of every shader and technique in Fragments.
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 shader coders.

Fragments will be open for enrollment on May 15 2026.

Fragments will be open for enrollment on May 15 2026 ↓

Join the waitlist to get notified when enrollment opens.

Sign up to get notified when enrollment opens

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

A little about me ↓

I've been making things with code for over 20 years. Hit a million dead ends along the way. The more I made, the better things got, but I wish it was 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

Fragments is a course for anyone interested in creative coding, shaders or graphics programming. It's a reflection of my own learning journey, and a way to share what I've learned with others.

Learn the shader techniques that set you apart.

For design engineers, creative coders and shader artists: techniques, tools, deep dives. Powered by ThreeJS and TSL.

This course bridges the gap: techniques, tools, and deep dives in TSL and Three.js.

Learn 12 essential shader patterns. Build the visuals you've been dreaming about.

For design engineers, creative coders and shader artists to take their skills to the next level.

For Design Engineers ↓

For Creative Coders ↓

For Shader Artists ↓

Take your shader skills from foundational to advanced.

Long-form Technique lessons12

Fundamental concept lessons6

Workflow enhancing Utilities44+

Full Shader Breakdowns171+

Downloadable Projects and boilerplates

Community Discord

Fragments will be open for enrollment on May 15 2026.

Fragments will be open for enrollment on May 15 2026 ↓

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

A little about me ↓

Some things I've made ↓

Shadercraft

Formation

How to create a liquid raymarching scene

Got questions? Here's something that might help.

Frequently Asked Questions

Learn the shader techniques that set you apart.

For design engineers, creative coders and shader artists: techniques, tools, deep dives. Powered by ThreeJS and TSL.

This course bridges the gap: techniques, tools, and deep dives in TSL and Three.js.

Learn 12 essential shader patterns. Build the visuals you've been dreaming about.

Thinking in Code

Geometric Shapes

Procedural Color Palettes

Domain Repetition

Kaleidoscopic Fractal

Noise

Mesh Gradient

Interactivity

Cellular Automata

Raymarching

Flow Field

Pixel Sorting

For design engineers, creative coders and shader artists to take their skills to the next level.

For Design Engineers ↓

For Creative Coders ↓

For Shader Artists ↓

Take your shader skills from foundational to advanced.

Long-form Technique lessons12

Fundamental concept lessons6

Workflow enhancing Utilities44+

Full Shader Breakdowns171+

Downloadable Projects and boilerplates

Community Discord

Fragments will be open for enrollment on May 15 2026.

Fragments will be open for enrollment on May 15 2026 ↓

Sign up to get notified when enrollment opens

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

A little about me ↓

Some things I've made ↓

Shadercraft

Formation

How to create a liquid raymarching scene

Got questions? Here's something that might help.

Frequently Asked Questions

Who is Fragments for?+

How do I use Fragments?+

Is Fragments for beginners?+

What format can I expect from Fragments?+

Can I preview the content?+

What is the difference between Fundamentals and Pro?+

What license covers the content?+

Is this a one-time purchase?+

Do I receive an invoice?+

Do you support Parity Purchasing Power (PPP)?+

Do you offer student discounts?+

What if I am not happy with the content?+

Can I use this on mobile?+

How can I ask more questions?+

Thinking in Code

Geometric Shapes

Procedural Color Palettes