Learn the shader techniques that set you apart.

Explore the collection ↵
Warp 5Domain warping with layered noise distorting coordinate space

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

Explore the collection ↵

Gain functional knowledge of creative coding techniques.Access tools to supercharge your artistic and professional workflows.

Fractal 4
Cascade 4A kaleidoscopic fractal sketch utilising shearing matrices
Eidolon 3A sketch exploring rotating shapes and gradients

10 creative coding deep-dives. Craft the visuals you've been dreaming about.

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
Warp 1 - A sketch exploring domain warping
Shift 4
Shift 4 - A sketch exploring pixel sorting techniques

The tools you need to get started and experimenting with shaders.

Re-usable resources built with React Three Fiber (Or vanilla), Three.js and TSL.

  • Techniques10

    Deep explanations and breakdowns of underlying techniques with copy-pasteable implementations and examples.

  • Utilities36+

    A collection of utilities to streamline your TSL workflow with copy-pasteable implementations.

  • Sketch Breakdowns110+

    Fully commented source code and breakdowns of each sketch.

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

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 ↓

  1. Shadercraft

    Curated shader art, learning, inspiration and the people that make it happen

  2. Formation

    A collection of generative, algorithmic shader experiences coalesced from the void

  3. How to create a liquid raymarching scene

    A tutorial on how to create a liquid raymarching scene using ThreeJS Shading Language
  • Genuary 12
    Genuary 12Genuary 2025 prompt: subdivision. Recursive space partitioning creating fractal-like patterns through iterative division.
  • Genuary 20
    Genuary 20Genuary 2025 prompt: generative architecture. Procedural buildings using domain repetition and SDFs creating urban landscapes.
  • Flare 3
    Flare 3Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.
  • Arcs 1
    Arcs 1Simple shapes and gradients inspired by Alex Cristache. Arc SDFs with soft color fills creating elegant minimalist compositions.

Got questions? Here's something that might help.

Frequently Asked Questions

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.
Sketches121Writing25
sketches/penumbra-1.webp

Thinking in Code

A creative coding process for finding inspiration and experimenting with shaders.

beginner
sketches/arcs-2.webp

Geometric Shapes

Creating and combining basic geometry to build complex patterns and structures.

Free
beginner
sketches/warp-1.webp

Procedural Color Palettes

Generate limitless color variety in shaders using simple functions.

beginner
sketches/genuary-20.webp

Domain Repetition

Create endless repeating patterns by transforming coordinate space.

intermediate
sketches/cascade-4.webp

Kaleidoscopic Fractal

Infinitely complex geometric patterns with repeating structure at different scales.

intermediate
sketches/slate-3.webp

Noise

Generate natural-looking textures and motion using pseudo-random values.

intermediate
sketches/mesh-7.webp

Mesh Gradient

Create organic color transitions by warping coordinate spaces and blending color points.

intermediate

Interactivity

Make shaders responsive with cursor following, trails, and buffered click interactions.

New
intermediate
sketches/abiogenic-1.webp

Raymarching

Create complex 3D scenes with minimal memory using signed distance functions.

advanced
sketches/gravity-6.webp

Flow Field

Create organic patterns and flowing motion using direction vectors and velocity.

advanced
sketches/shift-8.webp

Pixel Sorting

Create glitch art effects by reordering pixels based on their properties.

advanced
Unlock the CollectionJoin 143+ 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.

Fragments is for anyone who is 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.

Be the first to know what's next