All experiments

Lab 05 Interactive portrait

Patrick Gibbs working at his laptop, rendered in electric blue pixels

Hello, I’m Patrick Gibbs.

A portrait you can pull apart.

Move your cursor through the portrait to disturb its pixels, click or tap for a local burst, or use Explode everything to scatter the whole scene.

Move through the pixels.
Click for a local burst.
Tap for a local burst.

The source is a video. The interaction is drawn in your browser, so each disturbance follows your cursor or your tap. The portrait itself stays fixed in place.

Pause motion freezes the scene. If your device requests reduced motion, you'll see the still image instead.

How it's built

The portrait plays a video into a canvas through WebGL, one frame at a time, with a still poster image underneath for the fallback.

The interaction layer reads your pointer position and pushes nearby pixels off their sample point; a click releases a burst that a small particle field carries and settles.

The renderer runs only while the portrait is on screen. Reduced motion swaps the canvas for the still image and says so in the status line.

How I built this site

Say hello.

Tell me what you'd like to build or improve.

Quick navigation

Find a page.

Use the arrow keys to choose a result, Enter to open it, or Escape to close.