Making shaders respond like toys

Why interactivity?

Adding interactivity turns a quiet shader into a living surface. You move your pointer and the art shifts and moves and morphs with it. Adding that little bit of feedback can really connect your audience with your work.

This new technique is all about adding some meaningful, fun interactivity to your shaders using TSL. There are so many different ways you can approach handling physical (or auditory, or visual, etc) input with your technology, but I think one of the most common is your mouse, or touchpad.

Technical breakdown and a suite of utilities

This is a really excellent technique to cover because there are a ton of opportunities to create worthwhile abstractions and helpful utilities that have vast use cases. Here are the three main sections that this technique covers:

Handling pointer input

You get a clean flow for pointer uniforms in both React Three Fiber and vanilla setups. It normalizes the cursor, respects aspect ratios, and feeds a uniform you can reuse everywhere.

No more hunting through helper files when a THREE.js scene needs a quick UI response; just drop this code into your project and you're good to go.

The technique walks through ways to remap input data to color ramps, rotation, zoom, or any other value. It keeps the math readable and adds notes about why each step matters.

Cursor trails with rich movement

The grid trail texture is the hero of this section. It stores recent pointer motion inside a data texture and exposes direction plus speed right in the shader. You can distort, color, or mask any pattern with that single sample, which makes a THREE.js playground feel alive.

You learn how decay, radius, and influence settings change the feel of a trail. The guide also shows how to combine multiple resolutions so slow movements leave ghost lines while fast sweeps flash neon edges.

Click bursts without chaos

Buffered triggers let many clicks play out at once. One buffer tracks the strength of each burst, while others track the position to lock where the burst started. It's simple in concept, but powerful in practice.

In this example, each frame, the shader loops through active instances and draws bloom-y rings, particle pops, or really any shape you like.

How the lessons connect

Each piece lines up with the next - pointer input basics feeds into more advanced techniques like cursor trails and buffered inputs. These can then really easily be layered onto your existing shaders to create amazing, interactive experiences.

You end up with a small set of nodes and functions that covers an amazing amount of ground.

Like all the techniques in Fragments, this one is designed to layer onto other techniques - compounding knowledge that will exponentially increase your ability to create the shaders you really want.

Supporting utilities like: Pointer Uniform, Grid Trail Texture, and Buffer Trigger will all be available to drop straight into your projects.

Why you should care

Interactive shaders are sticky for viewers - they invite play, teach people how the effect works, and make your work feel like a playground.

When your shader answers every move, it feels personal and it feels fun - things that make your work really memorable.

• Add interactivity to your Flow Fields to create attractors and repulsors that respond to your cursor
• Super power your Procedural Color Palettes with interactivity to create dynamic, ever-changing color palettes that respond to your cursor
• Add rich camera control to your Raymarching scenes

The possibilities really are endless!

Join Fragments to access everything!

This technique will be available in preview soon! It adds an amazing new layer to your creative coding toolkit along with a ton of other great content and utilities:

• 10 deep dive techniques
• 36+ utility functions and components
• 120 sketches with full breakdowns
• Access to the Github repos with starter projects
• Access to the Discord community

I have massive plans for Fragments going forward, along with some other changes that I'll talk about later. I'd love you all to join the almost 100 (99!) other creative coders and shader artists who have already joined in!

If you haven't unlocked Fragments yet, you can sign up here to get access to everything.