Writing about shaders and creative coding.

Get new posts straight to your inbox!

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...

Ready to start learning?

What you unlock with Fragments ↓

Lifetime access to our collection of 10 creative coding techniques. 36+ utilities, full breakdowns of 110+ sketches, and downloadable R3F and vanilla projects.

One single payment - no subscription required.

Loading...

Fragments

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

Loading...

2025 Phobon

phobon.io↗Shadercraft↗

Pages

Home↗Techniques↗Utilities↗Breakdowns↗Sketches↗Writing↗

Contact

X @thenoumenon↗hey@fragments.supply↗OKAY DEV @phobon↗
All rights reserved.
Sketches114Writing23
writing/og/23-building-a-tsl-boilerplate-where-to-start.jpg
232025-12-02

Building a TSL boilerplate: where to start

One of the biggest hurdles to learning TSL is knowing where to begin. Here's how to build a boilerplate project that gets you coding shaders fast.

New
Free
writing/og/22-black-friday-2025.jpg
222025-11-25

Black Friday 2025 — 25% off Fragments

25% off Fragments for Black Friday, plus a preview of the new Fragments V2 platform and upcoming Interactivity technique.

Free
writing/og/21-why-design-engineers-should-learn-shaders.jpg
212025-11-18

Why design engineers should learn shaders

A dive into why I think design engineers should learn to write shaders, and how it can unlock a whole new world of creativity and expression.

Free
writing/og/20-making-shaders-respond-like-toys.jpg
202025-11-11

Making shaders respond like toys

Preview the Interactivity technique for creative coding with Three.js—pointer tracking, grid trails, and click bursts that design engineers can ship fast.

Free
writing/og/19-making-pixels-misbehave.jpg
192025-11-04

Making pixels misbehave with distortion

Wave, swirl, and bulge distortion utilities are now live. Here's how they work and why distortion effects are just so fun to use.

Free
writing/og/18-why-some-techniques-stick-and-others-dont.jpg
182025-10-28

Why some techniques stick and others don't

What makes certain shader techniques memorable while others fade away? Here's what I've learned about why some stick in your toolkit forever.

Free
writing/og/17-entering-my-post-processing-era.jpg
172025-10-21

Entering my post-processing era

A fresh batch of shader effects for your creative toolkit. From vintage aesthetics to crazy glitches.

Free
writing/og/16-almost-quit-making-led-effect.jpg
162025-10-15

I almost quit making this LED effect

Hours of tweaking shapes and offsets almost broke me. Here's what happens when you push through the frustration.

Free
writing/og/15-building-mesh-gradients-12-times.jpg
152025-10-08

I built the same thing 12 times and I'll do it again

I've rebuilt the same mesh gradient 12 times. Why remaking the same thing teaches more than making new things.

Free
writing/og/14-why-learn-shaders.jpg
142025-10-01

Why should you learn to write shaders?

A dive into why I think you should learn to write shaders, and how it can unlock a whole new world of creativity and expression.

Free
writing/og/13-early-access-meshgradient.jpg
132025-09-24

Fragments Early Access — Mesh Gradient

Week three of early access: mesh gradient technique launches with custom color interpolation.

Free
writing/og/12-early-access-pixelsorting.jpg
122025-09-17

Fragments Early Access — Pixel Sorting

Week two of early access: pixel sorting technique debuts, new utilities, and expanding the toolkit.

Free
writing/og/11-early-access-noise.jpg
112025-09-09

Fragments Early Access — Noise

Week one of early access: noise techniques launched, community feedback, and what's coming next.

Free
writing/og/10-early-access-launch.jpg
102025-09-03

Building Fragments — Early Access Launch

Early access is live! What's included, subscriber benefits, and the journey from concept to launch.

Free
writing/og/9-early-access.jpg
092025-08-20

Building Fragments — Early Access

What Fragments Early Access includes: pricing, content roadmap, and what to expect at launch.

Free
writing/og/8-fragments-preview.jpg
082025-08-14

Building Fragments — Preview

Preview of Fragments before launch: UI walkthrough, features, and what makes the platform different.

Free
writing/og/7-new-landing-page.jpg
072025-08-06

Building Fragments — A new landing page

New landing page design, answering community questions, and final touches before early access launch.

Free
writing/og/6-dawn-2-breakdown.jpg
062025-07-31

Breakdown of Dawn 2

Dawn 2 shader breakdown: gradient techniques, color theory, and inspiration from Rik Oostenbroek.

Free
writing/og/5-process.jpg
052025-07-16

Building Fragments — A Creative Process

My creative process for building shader art. From concept through iteration to final composition.

Free
writing/og/4-utils.jpg
042025-07-08

Building Fragments — Utils

Guide to Fragments utilities: copy-paste components and shader functions for faster creative coding workflows.

Free
writing/og/3-sketch-breakdowns.jpg
032025-07-01

Building Fragments — Sketch Breakdowns

Diving into sketch breakdowns: how they work, code structure, and shader composition explained.

Free
writing/og/2-collection.jpg
022025-06-24

Building Fragments — The Collection

Exploring the Fragments Collection: techniques, utilities, sketches, and how it all connects.

Free
writing/og/1-building-fragments.jpg
012025-06-17

Building Fragments — What is this thing?

What Fragments is, why I'm building it, and who it's for. The origin story.

Free
Unlock the CollectionJoin 134+ design engineers, creative coders and shader artists→$149USD
You'll be redirected to our secured payment platform and directly get access to the Fragments collection.

Be the first to know what's next