Mouse Interaction

A colorful glow follows the mouse position and pulses over time. The core logic is:

Let's break it down.

What u_mouse is

u_mouse is the mouse position passed in from outside the shader, in pixels (e.g., vec2(150.0, 200.0)).

u_resolution is the canvas size in pixels. Dividing mouse by resolution converts it to the normalized 0.0–1.0 range — the same units as uv — so the two can be compared with distance.

Computing the distance and generating the glow

distance(uv, mouse) returns how far the current pixel is from the mouse position.

smoothstep(0.0, radius, dist) generates a 0.0–1.0 transition between 0 and radius:

• Distance is 0 (right at the mouse) → 0.0
• Distance exceeds radius → 1.0

1.0 - ... inverts this so the area near the mouse is 1.0 (bright) and the far region is 0.0 (dark). That's the glow.

Where the glow color comes from

At the brightest point, red is glow = 1.0, green is 0.5, and blue is 0.8 — combining into a pinkish-purple. Further from center, all three channels scale down proportionally until they reach zero.

Try changing it

Exercise

The exercise canvas already has most of the effect in place. Make sure u_mouse / u_resolution is correctly assigned to mouse so the glow follows the cursor, and verify the sin(u_time) pulse is working.

Answer Breakdown

• u_mouse / u_resolution normalizes mouse coordinates to 0.0–1.0
• distance(uv, mouse) measures each pixel's distance from the cursor
• 1.0 - smoothstep(0.0, 0.2, distToMouse) creates the glow within radius 0.2
• vec3(mouse, 0.5) makes the color shift with the mouse's x and y position
• sin(u_time * 2.0) * 0.5 + 0.5 produces a 0.0–1.0 pulse value
• Multiplying all three together gives a glow that tracks position, shifts color, and pulses

Try changing circle * pulse to circle + pulse * 0.1 — instead of dimming, the glow will slightly expand during each pulse.