QUICK NAVIGATION

Find a page.

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

LAB / 01 / INTERACTIVE PIXEL PORTRAITBack to experiments
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 for a local burst, or use Explode everything to scatter the whole scene.

Move through the pixels.
Click for a local burst.
Explore my work

What is happening under the pixels.

The source is a video. The interaction is drawn in your browser, so each disturbance follows your cursor. 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.

Technical details

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.

For developers: these are the source files behind this experiment — portrait.js, cursor-wake.js, hero-pixels.js and src/components/Portrait.astro. They are not public code links. · How this site is built

Have a project in mind?

Tell me what you'd like to build or improve. We can talk through what you need and whether I can help.

Book a call with mepatrick@epiphanydynamics.ai