How I Built a 60 FPS 404 Page With Live Video Background Removal

Amirhossein Dehghanazar — Sat, 08 Aug 2026 21:31:24 +0000

Most 404 pages are boring.

You spend hours designing the actual website, animations, interactions, and visual identity — and then when someone visits a URL that doesn't exist, they get:

404 — Page Not Found

I wanted to see if I could make that experience feel like an actual part of the website instead.

So I built a 404 page with four animated 3D characters: a shark, cactus, raccoon, and a completely unhinged duck.

The visual part was fun.

The difficult part was making it run smoothly.

The idea

Instead of rendering the characters as heavy real-time 3D scenes, I experimented with using video and processing it directly in the browser.

The goal was simple:

Animated 3D characters
Transparent-looking backgrounds
Smooth rendering
Around 60 FPS
Minimal CPU/GPU usage
No huge assets being downloaded
Good performance on different devices

The problem was that the videos naturally had backgrounds.

So I needed to remove those backgrounds at runtime.

The problem: live background removal

The first obvious solution was to process the video at its original resolution.

That worked visually, but it wasn't something I wanted to ship.

Processing every frame at a high resolution means the browser has to do a lot more work:

Video
  ↓
Frame processing
  ↓
Background detection/removal
  ↓
Rendering
  ↓
Next frame

And this happens continuously.

At 60 FPS, you have roughly 16.7ms per frame if you want to maintain that target.

Anything unnecessarily expensive quickly becomes noticeable.

Especially on mobile devices.

The optimization

The biggest improvement came from separating the processing resolution from the display resolution.

Instead of processing the entire video at a large resolution, I reduced the resolution used for the expensive processing step.

Conceptually:

High-resolution video
        ↓
Lower-resolution processing
        ↓
Background removal
        ↓
Optimized result
        ↓
Scaled/rendered output

The processing step became considerably lighter while the final result could still be displayed at a much higher visual size.

This was one of those cases where you don't necessarily need to process everything at the resolution the user sees.

You need enough information to produce a visually convincing result.

Why I didn't just render everything in 3D

I considered going down the full WebGL/3D rendering route.

But for this particular experiment, that would introduce another set of problems:

More complex assets
More runtime rendering
More memory usage
More implementation complexity
Potentially heavier mobile performance

The characters were already animated, so video gave me a much simpler way to reproduce the final visual.

The challenge was making the video behave like it had transparency.

The final result

The final 404 page contains four characters that appear directly inside the page:

🦈 Shark
🌵 Cactus
🦝 Raccoon
🦆 Questionable duck

And the result feels much more like an actual designed experience than a traditional error page.

The goal wasn't to build a production-ready rendering engine.

It was to see how far I could push a small frontend experiment while keeping the experience smooth.

What I learned

The biggest lesson was that performance optimization isn't always about making the final output smaller.

Sometimes the better approach is to make the expensive intermediate steps cheaper.

In this case, reducing the processing resolution made a surprisingly large difference while having a relatively small impact on the perceived visual quality.

It also reminded me that browser performance is often about finding the right balance between:

quality × computation × memory × frame time

You don't necessarily need the most technically complicated solution.

You need the solution that produces the result you want within the constraints of the device.

Open source

This started as a random experiment I built for fun.

Once I saw how it behaved in the browser, I decided it would be more useful if other developers could play with it too.

So I open-sourced the project.

GitHub Repository: https://github.com/AmirhosseinDehghanazar/3d-404-page

The repository is definitely not perfect.

It started as a fun experiment rather than a production project, so there are probably plenty of things that could be improved.

I'd especially love feedback on:

Browser performance
Mobile optimization
Rendering architecture
Video processing
Memory usage
Better approaches to background removal

If you find something that could be improved, feel free to open an issue or contribute.

Sometimes the most interesting projects start as something you build just because you wondered:

"What if I tried this?"

And that's exactly how this one started.

DEV Community: Amirhossein Dehghanazar