Learn the shader techniques that set you apart.

Enroll in Fragments ↵

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 sketch exploring rotating shapes and gradients

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

Learn 11 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 sketch exploring domain warping

Shift 4 - A sketch 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 lessons11
Deep explanations and breakdowns of underlying techniques with copy-pasteable implementations and examples.
Workflow enhancing Utilities40+
A collection of utilities to streamline your TSL workflow with copy-pasteable implementations.
Full project Breakdowns141+
Fully commented source code and breakdowns of every sketch 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 sketch exploring pixel sorting techniques

Ready to start learning?

What's included in the course ↓

Lifetime access to the full course: master 11+ shader techniques, 40+ utilities, 141+ sketch breakdowns with full code, and downloadable R3F and vanilla projects.

One single payment - no subscription required. 30-day money-back guarantee.

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.

Enroll in Fragments ↵

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 sketch exploring rotating shapes and gradients

Learn 11 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 sketch 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 lessons11
Deep explanations and breakdowns of underlying techniques with copy-pasteable implementations and examples.
Workflow enhancing Utilities40+
A collection of utilities to streamline your TSL workflow with copy-pasteable implementations.
Full project Breakdowns141+
Fully commented source code and breakdowns of every sketch 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.

Ready to start learning?

What's included in the course ↓

Lifetime access to the full course: master 11+ shader techniques, 40+ utilities, 141+ sketch breakdowns with full code, and downloadable R3F and vanilla projects.

One single payment - no subscription required. 30-day money-back guarantee.

Enroll in FragmentsJoin 162+ developers learning shader techniques→$149USD

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.

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

Learn 11 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 lessons11

Workflow enhancing Utilities40+

Full project Breakdowns141+

Downloadable Projects and boilerplates

Community Discord

Ready to start learning?

What's included in the course ↓

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.

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

Learn 11 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

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 lessons11

Workflow enhancing Utilities40+

Full project Breakdowns141+

Downloadable Projects and boilerplates

Community Discord

Ready to start learning?

What's included in the course ↓

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

Domain Repetition

Kaleidoscopic Fractal

Noise

Mesh Gradient

Interactivity

Raymarching

Flow Field