A 404 page that moves like water

Most 404 pages apologise. I wanted mine to invite you to stay for a few seconds. So the page became a surface of moving blue light that reacts when you move the cursor or tap the screen.

The brief I gave myself

• Use the brand blues: #0422B6, #0161FF and a near black #020617.
• Respond to the hand: a soft swirl on hover, a ripple on tap.
• Stay light: the site has to feel as fast as before.

How the water moves

The background is a small WebGL shader. It layers fractal noise and then warps that noise with itself, a technique called domain warping. The result behaves like ink in water: slow folds that keep changing and never repeat in an obvious way.

The cursor adds a gentle twist around its position. A tap sends a ring outward that fades after about three seconds. On a phone this turns the page into something you want to touch.

An error page is still a brand moment.

Then it learned to play

The page now makes sound. I divided the screen into nine invisible cells, three columns by three rows, and placed a shaker in each one. The nine shakers climb a G major scale from the bottom left to the top right, tuned to A = 432 Hz. Every tap or click plays the hit and two echoes that fade out.

The sound is generated live in the browser, with zero audio files to load.

The text reacts now as well. The 404 and the message bend and split into color under the cursor, the same effect as the title on my About page.

Keeping it fast

• The shader renders at the screen’s native resolution, capped at 2x, so the text stays sharp.
• Animation pauses when the page sits in a background tab or scrolls out of view.
• Visitors who ask their device for reduced motion see a still frame of the same gradient.

Where it lives now

The same moving blue now sits behind the 404 page, the copyright page and the privacy page. It also tints every story in this journal: each track has its own key color, and the gradient takes on that color.

Try it: visit a page that is lost and move your cursor across the screen.

How I made it

I built this page with Claude, the AI assistant by Anthropic, connected to my WordPress site through the Elementor MCP. I described the feeling I wanted, Claude wrote the code and placed it in Elementor, and I reviewed every step.

You can do the same: connect Claude to your Elementor site, describe an idea in plain words and shape it together.