Brick reveal

A square tile floats in the middle of the card over a soft glow. On it is a mountain lake at sunset, but restyled, first as a mosaic of studded toy bricks, then as chunky voxel blocks, then as a flat cartoon with inked edges, each held for 2.8 seconds and crossfaded in 0.28. Wherever the pointer has just been, the style peels away in rounded blocks and the plain picture shows through, and the peeled patch heals over as the trail fades. With no pointer, a virtual cursor wanders over the upper middle on a few layered sines, so the card reveals itself on its own.

The trail is a 220 by 220 half-float texture in a ping-pong pair. Each frame it keeps the minimum of four diagonal neighbours a little way off, times a slow decay, so it shrinks evenly from its edges and stays one connected shape as it fades, and it paints a soft spot at the cursor whose edge is pushed around by 3D Perlin noise. The display pass snaps the trail to a 24 by 24 grid: a cell is on when its trail value passes one half, every on cell draws a rounded box slightly larger than the cell, and the boxes are joined with a smooth minimum, so neighbours fuse into one shape with rounded outer corners. A freshly lit cell overshoots its size for a moment, so blocks pop in. A thin bevel along the inside of the edge makes the revealed patch look pressed in.

Every picture is drawn in code. The plain one is a painted scene with a reflection, pines and film grain, and the three styles are made from that same canvas, so they line up with it exactly. The tile tilts up to about 7 degrees toward the pointer, 12 while the virtual cursor drives, and the glow behind it follows the cursor in the current style's colour.

• Paint the plain picture on a 2D canvas, derive the three style canvases from it, and upload all four as textures.
• Keep the trail in a half-float ping-pong pair. Erode it with the minimum of four neighbours, decay it, and paint a noise-edged spot at the eased cursor.
• In the display pass, threshold the trail per cell of a 24 by 24 grid and union a rounded box per lit cell with a smooth minimum, antialiased with a fixed width.
• Mix the style crossfade and the plain picture by that mask, and add an inner bevel from the mask's gradient.
• Drive a virtual cursor from layered sines when the pointer is away, and report tilt and glow to the card each frame.
• Stop on webglcontextlost, and on destroy delete both programs, the buffer, every texture and both framebuffers and lose the context.
• Under reduced motion, draw the brick picture once with no trail and no tilt.

• STYLES (bricks, blocks, toon): The styles in order, each with its maker and glow colour.
• STYLE_HOLD, STYLE_FADE (2.8, 0.28): Seconds each style holds and crossfades.
• TRAIL_SIZE, TRAIL_SIZE_AUTO (0.13, 0.2): The reveal radius under the pointer and under the virtual cursor.
• scene() (a mountain lake at sunset): The plain picture. Draw any square scene, or load an image into the same canvas.