Pixel Play: Crafting a Gooey, Interactive Shader

May 15, 2025 (2w ago)

There's a unique thrill in bending pixels to your will. If you've ever wondered how those mesmerizing interactive visuals come to life, you're in the right place. I recently built a playful pixel shader for my game's splash screen, Yabaesu (ヤベス), and it's a fantastic way to inject personality into any project.

The interactive pixel shader in action – watch how pixels react and distort with mouse movement!

The Gist: Shader Power Unleashed

Think of shaders as your GPU's direct line for art direction. These small, potent programs run in parallel, crunching numbers for every pixel simultaneously. This makes them wizards for rich visual effects. For this, a GLSL fragment shader takes our input (dynamic text!) and gives it that signature gooey, magnetic, mouse-reactive quality.

How It Works (The Core Recipe):

  1. Pixelate for Effect: We start by creating that chunky, retro aesthetic. By taking the screen coordinates (vUv) and snapping them to a coarser grid, each 'new' pixel block gets a distinct, old-school feel.

    // Snap UVs to a 65x65 grid for a blocky look
vec2 gridUV = floor(vUv * vec2(65.0, 65.0)) / vec2(65.0, 65.0);
vec2 centreOfPixel = gridUV + vec2(1.0/65.0, 1.0/65.0); // Center of this new 'block'

  2. Magnetic Attraction: Pixels get drawn towards the mouse (u_mouse). The smoothstep function ensures a graceful falloff – the closer, the stronger the pull. Applying pow to pullStrength gives the attraction a more dramatic, non-linear response, making it feel more 'magnetic'.

    vec2 pixelToMouse = u_mouse - centreOfPixel;
float distanceToMouse = length(pixelToMouse);
float magneticRadius = 0.25; // How close the mouse needs to be for full effect
float pullStrength = smoothstep(magneticRadius, 0.0, distanceToMouse);
pullStrength = pow(pullStrength, 2.0); // Exaggerate the pull for a snappier feel

  3. Motion Smearing: Static attraction is cool, but dynamic response is better. We factor in mouse velocity (u_mouse - u_prevMouse). This pullOffset, influenced by how fast the mouse moves, creates those satisfying 'streaks' or smears.

    vec2 mouseVelocity = u_mouse - u_prevMouse;
vec2 pullOffset = pixelToMouse * pullStrength; // Base pull towards mouse
// Add velocity influence for a smear/stretch effect
pullOffset += mouseVelocity * pullStrength * 20.0;

  4. Distorting the Texture: Here's the shader magic: we don't actually move pixels. Instead, we tell each pixel on screen where to look for its color on the original image (u_texture). By sampling the texture at this distortedUV, we create the illusion of movement. clamp ensures we don't sample outside the texture's boundaries.

    // Calculate the UV to sample from the original texture
vec2 distortedUV = vUv - pullOffset;
// Read the color, ensuring we stay within texture bounds
gl_FragColor = texture2D(u_texture, clamp(distortedUV, 0.0, 1.0));

Orchestration with Three.js

Three.js is our invaluable stage manager, abstracting away much of WebGL's boilerplate. It sets up the scene: a simple plane (our drawing canvas), an OrthographicCamera (perfect for 2D-style effects without perspective), and the ShaderMaterial that houses our GLSL code. 'Uniforms' act as bridges, piping data like mouse coordinates and our dynamically rendered text (as u_texture) into the shader.

And the cherry on top? Users can type in their own text and see it instantly join the pixel dance!

The Payoff: The Joy of Interactive Creation

There's something incredibly rewarding about breathing life into static elements with a few lines of code. This project was a potent reminder that shaders aren't just for complex 3D; they're a fantastic tool for crafting unique, delightful user interactions on the web.

Want to play?