22
Experiment 22 · Interaction · 2026

BOOM!
HEADSHOT!

A hero portrait that resolves out of grain, shatters into falling dither on a click, and rebuilds itself. Notes on chasing feel over spectacle.

DisciplineInteraction, WebGL
StackReact · WebGL2
SurfaceFramer hero component
Year2026
See it in action
PORTRAIT
Rolf Nelson
The rule I kept
Judge it by how it feels in the hand, not how it looks in a screenshot.

The wrong turns worth taking

The first build put a dithered headshot behind a cursor magnifier that resolved the photo wherever you pointed. Clean, and self-defeating. The dither was the interesting part, and the interaction's whole job was erasing it. A spotlight whose only purpose was turning the star off. First decision: stop building an interaction that deletes the thing worth looking at.

The second try pushed the dither around like iron filings. In the hand the face went wavy and the dots swelled when you moved fast. Mushy, not tactile. Fun to watch, wrong to touch. I killed it, and that was the most productive move of the week.

A material you can disturb

The version that worked treated the dither as a material, something to disturb instead of noise to resolve. Face at rest, brush breaks it into grain, grain heals back. Inverted, it clicked: grain at rest, brush pulls the face out of it.

The interaction became a small act of authorship. You touch a surface and it responds.

Composure

Feel also meant getting the noise down. Three quiet fixes turned a busy screen into a composed one, and none of them are flashy. Together they're the difference between a demo and something you'd sign.

Anchor the grid to the image
Screen-locked, the grid floated in front of the face like a screen door with the picture sliding behind it. Locked to the image, the grain becomes the surface of the thing and travels with the face when disturbed.
ditherimage-space
Let the shadows go solid
The dither now fades to clean ink in the darkest regions, so the dots live only on the lit face and the midtones where they describe form. The near-black ground went quiet and the effect started pointing at me.
luminancemask
Make the grain static
The animated version crawled like TV static and read as restless noise sitting on top. Fixed per pixel, it reads as paper.
noisefixed

Giving the click a body

The click is six micro-moments, and each one got argued over on its own. The feel doesn't live in any single choice. It lives in the pile of small deliberate ones, and getting even one wrong tips the whole thing into fake. Here's what each moment is doing and why it's built that way.

01
Press and hold
Only the plate recedes; the frame and labels stay put. Pushing the whole panel would feel like clicking a card. Moving just the face makes it feel like pressing on a person.
02
Release
The snap back carries a hair of overshoot. A linear return reads mechanical; the overshoot gives it the spring of something physical settling. The collapse waits for this exact instant, so cause and effect stay legible.
03
The dots detach
Each dot leaves its own grid cell at its own size, no scaling and no burst. It came from somewhere specific, so it has to leave from there, or the eye stops believing it.
04
They fall
Gravity, plus a sideways kick on impact scaled to how hard each one lands. Straight down would read as a curtain. The lateral scatter is what makes it read as debris.
05
They dissolve
Only after a bit has actually stopped. Fading a moving dot looks like a glitch; fading a resting one looks like settling dust. The timing follows the physics, never a clock.
06
The face rebuilds
Same animate-in as first load, paced to the settle. Reusing the intro makes the return feel like the page's own language instead of a separate effect bolted on.

Building in a little chaos

The first pass at the falling dots felt fake, and I could see it before I could name it. Everything spawned on the same frame with the same gravity and bounce, so the bits marched across the floor in lockstep waves. Perfect synchronization is the tell that says computer.

So I built in some chaos on purpose. Every bit got its own gravity, bounce, stagger, and dissolve timing, and nothing runs on a clock. Bits dissolve when they stop moving, and the face returns once enough of them have settled. It never plays the same way twice, which is what made it feel alive.

Interaction principles for designing with AI

I built this whole thing with AI as the pair, in small honest turns. The principles that fell out apply past a portrait, and they're as much about designing interactions with AI in the loop as about this one plate. A working set, and maybe the bones of something bigger later.

01
Don't delete the interesting thing
If a hover state hides the texture or data that made someone look, you've inverted the job. A chart that flattens to one number on hover makes the same mistake. Reveal more, not less.
02
Decoration as material
Give a decorative surface physics or memory and let people leave a mark. A grain field, a gradient, a hero background. Authorship beats spectacle.
03
Anchor to content
Pin grain, masks, cursors, and parallax to the object they belong to, not the viewport, or they read as a layer sitting on top.
04
Concentrate the effect
Key an effect to where it describes something and let the rest go quiet. Only animate the points that changed. Silence is composition.
05
Choreograph cause and reaction
Give consequential actions an arc: anticipation, action, reaction. A button that only changes color is skipping two thirds of the moment.
06
Desync everything
Uniform timing is the machine tell. Per-element gravity, delay, and ease break the formation. Stagger the list, jitter the particles.
07
Gate on real state
Sequence off actual completion or physics, not a stopwatch. It feels responsive and never plays identically twice.
08
Design the passive path
The intro that plays for someone who never hovers is a first-class design, not a fallback. Make the key moment land for the person who does nothing.
09
Capture the live render
When one visual state seeds the next, inherit the real rendered pixels so the transition stays honest to what the eye just saw.
Feel is a verb.

None of this came from a spec. I built a version, put it in my hand, found the one thing that felt off, and took another turn. The waviness, the marching waves, the floating grid: none of them showed up in a description. They showed up in the doing.

That's the method I'd repeat on anything meant to feel like a thing you can touch.

Resources

See it in action LinkedIn
Design by ProxyExperiment 22 · Interaction · 2026