Metaball cursor

Problem

Find out how far a browser gets on its own, with not one dependency installed.

Solution

One HTML file that opens straight from disk. The cursor mask is welded from thirty-two trail points with a smooth-minimum function, and the colour fringing comes from evaluating that same mask three times, once per channel. The text is not an element at all. It is a coverage texture drawn on a canvas of its own.

What it does

• A 32-point cursor trail welded with a smooth-minimum function
• Chromatic aberration from evaluating the mask three times, offset per channel
• Text as a coverage texture rather than an element
• Two percent film grain: enough to stop the gradients banding
• Reduced-motion and touch handled
• Four variants of the effect in separate files

How it's built

• Raw WebGL1 plus canvas 2D in one self-contained HTML file
• No npm, no CDN, no libraries
• Text drawn to an offscreen canvas as a coverage mask, then uploaded as a texture
• Cursor trail: 32 points, damping 0.15, chain 0.34
• The blob as an SDF welded with a polynomial smooth-min, k growing with speed
• One draw call per frame, TRIANGLE_STRIP, four vertices

How it looks

The cursor mask with chromatic aberrationThe ink variant

What it changed

• A lab piece: deployed nowhere, so there is no result beyond the file itself
• No dependencies means nothing to maintain: the file does not rot along with a node_modules, and it opens off a disk
• Four variants of the effect; design target one draw call per frame, with no measurement recorded in the files

Stack

• WebGL1
• canvas 2D
• no npm
• no CDN

Story

A brief written for myself, with the acceptance criterion stated as a number: sixty frames per second at 1440p, one draw call, four vertices. No measurement is recorded in the files, so I am not claiming the bar was cleared.