A WebGL Ghost That Follows Your Cursor, Built with a Fragment Shader and Spring Physics

Introduction

This effect renders a soft, translucent blob that trails the mouse around the screen, with two eyes and a mouth that emerge out of a noisy, ever-shifting surface. It is not a sprite or a pre-rendered animation — every frame, a WebGL fragment shader samples a canvas texture for the blob's silhouette, subtracts a face shape from it, and distorts the whole thing with simplex noise, while a completely separate spring-physics system decides where the trail of dots that make up that silhouette actually sits on screen.

The technique rests on four ideas: a chain of dots that each spring toward the dot in front of them, drawn with radial gradients onto a 2D canvas to form the trail's silhouette — that silhouette handed to WebGL as a texture, so the GPU only ever has to sample a mask instead of tracking twenty-five individual shapes — a face carved out of that mask using pure signed-distance-style math inside the fragment shader, rotated toward the direction of movement — and a small state machine that swaps between "moving" and "idle" behavior to drive a smile and a bit of gravity sag on the tail.

Step 1 — Sampling a Mask, Then Distorting It

The fragment shader never draws the trail itself — it samples a single-channel mask from a sampler2D uniform (u_texture) that a 2D canvas has already rasterized on the CPU side. That mask value, trailMask, is the raw silhouette. Simplex noise is layered on top of it as a multiplier rather than an addition, scaled by the current pointer size and offset over time by u_time, so the edges of the blob constantly ripple instead of sitting still. A smoothstep gradient is folded into the noise along the vertical axis, which is what gives the tail its slightly "melting" look toward the bottom rather than a uniform fuzziness everywhere.

float trailMask = texture2D(u_texture, vec2(v_uv.x, 1.0 - v_uv.y)).r;

float grain = snoise(uv * vec2(0.7, 0.6) / u_size + vec2(0.0, 0.0015 * u_time));
grain += 1.2;
grain *= 2.1;
grain += smoothstep(-0.8, -0.2, uv.y / u_size);

float shape = trailMask - faceMask(uv, faceRotation);
shape *= grain;

Step 2 — Dots That Spring Toward the Dot Ahead of Them

The trail is a small chain of TrailDot instances. The lead dot snaps straight to the pointer's eased position every frame; every dot after it doesn't follow the pointer at all — it only ever chases the dot immediately in front of it, accumulating velocity toward that leader's position, damping that velocity by a friction factor, and optionally getting nudged downward by a shared gravity value. Because each dot only looks one step ahead, the whole chain reads as a single elastic tail without anything needing to know the pointer`s position except the very first link.

followLeader(leader, spring, friction, gravity) {
  this.vx += (leader.x - this.x) * spring
  this.vx *= friction

  this.vy += (leader.y - this.y) * spring
  this.vy *= friction
  this.vy += gravity

  this.x += this.vx
  this.y += this.vy
}

Each dot also carries a decaying radius and opacity, computed once from its index in the chain, so dots further from the head are smaller and fainter. Every frame, PointerTrail.draw() clears its offscreen canvas to black and stamps a radial gradient for each dot on top — that canvas is the exact texture the shader samples as u_texture.

Step 3 — Eyes and a Mouth, Built from Distance Fields

eyeShape() and mouthShape() both work the same way: they take a UV coordinate already centered on the blob, fold it (abs(uv.x) for the eyes, so both sides are computed from one formula), squash and shift it, then measure length(uv) as a rough distance field and raise it to a small exponent so the falloff reads as a hard-edged shape rather than a smooth gradient. faceMask() rotates the incoming coordinate by the difference between the pointer's eased and target positions first — that rotation is what makes the whole face tilt toward the direction the cursor is moving, entirely without any per-frame "look at" logic beyond that one angle.

float faceMask(vec2 uv, float rotation) {
  uv = rotate(uv, rotation);
  uv /= (0.27 * u_size);
  float eyes = 10.0 * eyeShape(uv);
  float mouth = 20.0 * mouthShape(uv);
  return mix(mix(0.0, 1.0, eyes), 1.0, mouth);
}

The u_smile uniform bends both shapes at once — added into the eyes' vertical offset and multiplied into the mouth's curvature — so a single float sliding from -0.1 to 1 is enough to swing the face between a startled, wide-eyed frown and a relaxed smile. That float isn't animated by a tween; it's nudged a fixed amount every frame in _updateFaceAnimation(), decreasing while the pointer is moving and creeping back up once it stops.

Step 4 — One Class Owns the GL Context, the Trail, and the Loop

GhostCursor is the only class that touches requestAnimationFrame. Each frame it updates the smile/gravity state machine, eases the pointer toward its target, pushes fresh uniforms to the shader, asks PointerTrail to step its physics and redraw its canvas, uploads that canvas as a texture, and finally draws a single full-screen triangle strip. Everything else in the file — PointerState for the moving/idle timer, PointerTrail for the dots, the shader-compilation helpers — is a plain, independently testable unit that GhostCursor composes rather than inherits from.

_renderFrame() {
  this._updateFaceAnimation()
  this.pointer.ease()

  this.trail.update(this.pointer.x, this.pointer.y,
    this.params.spring, this.params.friction, this.params.gravity)
  this.trail.draw()

  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.trail.canvas)
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)

  this._rafId = requestAnimationFrame(() => this._renderFrame())
}

Step 5 — Sliders and Color Pickers Without a UI Library

Rather than pulling in a third-party controls library, a small ControlPanel class builds its own collapsible DOM: a header that toggles an is-collapsed class, and rows built from three tiny factory methods — _sliderRow(), _colorRow(), and _checkboxRow() — each wiring a native <input> straight to a setter on GhostCursor (setSize, setMainColor, setFlatColor). Native <input type="color"> elements hand back hex strings, so a pair of small converters translate between that and the [r, g, b] float triples the shader uniforms expect.

function hexToRgbFloat(hex) {
  const int = parseInt(hex.slice(1), 16)
  return [((int >> 16) & 255) / 255, ((int >> 8) & 255) / 255, (int & 255) / 255]
}

The panel also hooks its own mouseenter/mouseleave events to a setControlsPadding() call on the ghost, which keeps the pointer state from getting pulled toward the pointer while the user is dragging a slider inside the panel itself — the same trick the original pointer-tracking logic used to avoid the trail fighting with the UI.

Tuning Reference

Full Source Code

The complete effect is a single self-contained HTML document — a vertex/fragment shader pair, a handful of small ES classes (TrailDot, PointerTrail, PointerState, GhostCursor, ControlPanel), and no external runtime dependencies beyond the browser's own WebGL and Canvas 2D APIs.

// Full source available in the Aduok GitHub repository
// https://github.com/aduok/aduok-code-snippets/blob/main/blog/ghost-cursor.html