Design a 404 page for a road trip planner where the "404" shimmers like heat haze. A rounded card with a dusk sky gradient from violet (#1c1230) through plum and rose (#8e3a4a) to apricot (#f6a25e) at the horizon, a soft sun glow, and a road drawn in SVG along the bottom with a dark verge and dashed apricot centre line. Top row: a compass logo "Long Way Round" and "Road trips, planned properly". Draw "404" on a canvas sized with devicePixelRatio capped at 2: render it once to an offscreen canvas in a heavy system sans with a cream (#fff6ea) to peach (#ff9d6a) gradient, then every frame copy it back in 2px tall rows, each shifted sideways by two sine waves plus a little random fuzz, stronger toward the bottom where the road is hottest. Below the numbers, draw a mirage: the same rows flipped, squashed to 62% height, fading out and wobbling harder. The haze breathes gently on its own, grows as the pointer gets closer to the numbers and jumps when you tap them. Under it, a serif headline "This road ends in a mirage.", a short line in pale pink and two buttons, a cream "Take me home" and an outlined "Search trips". Keep a real h1, an aria-label of 404 on the canvas, and draw it still for reduced motion.
Written by Informeek Studio to recreate this design. Prompts are not deterministic: running it again gives a similar result, not an identical one.
Use it in three steps
- Copy the prompt with the button above.
- Paste it into your tool, such as v0, Lovable, Bolt or Claude.
- Make it yours by changing the copy and the sky to suit your own brand.
About this 404 page design
Good 404 page design turns a dead end into a moment of personality, then gets people moving again. This one belongs to a road trip planner, so the missing page becomes a mirage: the numbers 404 shimmer above a desert road at dusk, and a faint, wobbling reflection hangs beneath them like the shimmer you see on hot tarmac.
The effect is a fuzzy text technique done gently. The numbers are drawn once to a hidden canvas, then copied back every frame in thin rows, each nudged sideways by two slow waves and a pinch of randomness, more toward the bottom. The haze breathes on its own, grows as the cursor approaches and flares when you tap. Below it, the page does its real job with a clear headline and two obvious ways out.
Why the prompt works
- It explains the row technique, an offscreen canvas redrawn in 2px slices.
- It describes the mirage as flipped, squashed and fading, so it reads as a reflection.
- It ties the strength to the pointer and gives touch a tap.
- It keeps a real h1 and two exits, which matter more than the effect.
Where to use it
404 and maintenance pages, coming soon screens and empty search results. Change the theme, but always keep a link home in plain sight.
The prompt is shared under CC BY 4.0. Reuse it freely, including commercially, with a credit linking back to this page.
