patrickgibbs.dev
Book a call

QUICK NAVIGATION

Find a page.

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

Build notes · September 2026

How I built a portrait you can pull apart.

From a blue still image to a moving portrait that scatters under the cursor. The choices that made the interaction feel right.

Patrick Gibbs · 3 min read

← All writing

I wanted this website to feel like something I’d built, with a detail people could play with and remember. Ruben Marcus’s portfolio was the starting point. His digital portrait made me wonder what my own version could feel like.

The first challenge was getting the image right. I wanted my arms and hands visible, as if I were working at the laptop. A close-up of my face wouldn’t tell the same story.

The video was only the beginning

I tried generating a blue, pixelated video. Some attempts looked close until I watched them carefully. The laptop logo looked pasted on. In one clip, my eyes closed and stayed closed too long. Those small things were enough to make the whole image feel wrong.

Once the video worked, simply putting it on the page wasn’t enough. I wanted visitors to affect it.

The browser now uses the moving video as the source for a field of particles. Those particles can move away from their original positions while the underlying footage continues to play. That gives the scene somewhere precise to return to.

A small cursor, a strong response

My first correction was about the size of the disturbance. A large circle around the cursor made the portrait look smudged. Shrinking the circle helped, but reducing the force at the same time lost the effect I wanted.

The useful distinction was between the area affected and how far the pixels moved. I wanted a narrow cut with enough movement to break up the image inside it.

Fast movement brought another problem. The browser doesn’t report every position the cursor passes through. Connecting those reported positions keeps a quick swipe from jumping over the image without touching it.

The whole scene belongs together

At first, a click only affected the portrait. Then we added tiny pixels around it and across the hero. They needed to feel connected. The portrait, code, and floating pixels need to respond as one scene. A normal click should disturb the nearby area; Explode everything is the separate control for scattering the whole hero.

I also removed the effect that made the whole portrait float with the cursor. It made me dizzy. Keeping the image fixed gave the smaller interactions room to work.

The result still has motion, but it has a stable place to come back to. That’s the part I kept coming back to during the build: how the interaction feels when it settles.

I wanted the portrait, live code, and floating pixels to feel connected when you move through them. Matching their response matters more than adding another effect. The scene should also return to a stable position when the disturbance settles.

Try the portrait in the Lab, or read about the tools and inspiration.

product

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