patrickgibbs.dev
Book a call
All writing

Build notes,

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.

Written by
Patrick Gibbs
Published
Reading time
3 min read

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 I added tiny pixels around it and across the hero. They needed to feel connected, with the whole scene responding as one. A normal click disturbs the nearby area. In the Lab, Explode everything scatters the whole scene.

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 always has a stable place to return to. How the interaction feels when it settles mattered more to me than adding another effect.

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

Topics

Say hello.

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

Book a call with me

Quick navigation

Find a page.

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