Black Hole 404, Three.js Interactive Error Page Template
A Three.js 404 page featuring a WebGL2 black hole with real-time physics metrics. Clone it to your workspace to customize the cosmic visuals by chatting.
Bring your own keys
This template reads NODE_ENV, REMOTION_GOOGLE_MAPS_API_KEY, REMOTION_MAPTILER_KEY. You supply your own values — nothing is copied from the original.
What's inside Black Hole 404
The parts this template already ships, and what each one is for.
Interactive WebGL2 singularity
A high-performance 3D black hole built with Three.js that responds to user movement. It turns a standard error page into a tactile experience.
- 1Drag to orbit the event horizon
- 2Scroll to approach or retreat from the void
- 3Realistic accretion disk rendering
- 4WebGL2 support for advanced shaders
What's inside Black Hole 404
- Interactive WebGL2 singularity
A high-performance 3D black hole built with Three.js that responds to user movement. It turns a standard error page into a tactile experience.
- Drag to orbit the event horizon
- Scroll to approach or retreat from the void
- Realistic accretion disk rendering
- WebGL2 support for advanced shaders
- Real-time physics HUD
A minimalist data overlay displays live metrics from the simulation as the user interacts. It gives the page a technical, diagnostic aesthetic.
- Live photon sphere and ISCO metrics
- Disk velocity and particle tracking
- Dynamic matter consumption stats
- Terminal-style monospace typography
- Thematic error navigation
Standard 404 messaging is replaced with cosmic-themed copy that floats over the 3D void. It includes a clear path back to your main site.
- Floating 'signal lost' text layer
- Responsive return home link component
- High-contrast text for dark backgrounds
- Customizable 'event horizon' metaphors
What to get right first
The decisions that are painful to change later in Black Hole 404.
Update error messaging
Change the signal lost text to say Page Expired and update the return button to link to my main dashboard.
Swap brand colors
Change the orange light of the accretion disk to a neon blue and make the text glow to match my brand.
Modify physics metrics
Remove the observer stats from the bottom left and only keep the particle count and the main error message.
Adjust animation speed
Make the black hole spin significantly faster and increase the particle density to create a more chaotic effect.
About this template
What it is for, and who should skip it.
What you would actually use this for
You would use this template to turn a generic 404 error into a high-impact branding moment. It is a fit for SaaS startups in the dev-tool space, creative agencies, or technical portfolios that want to signal engineering depth. A developer might open this on a Tuesday to replace a boring browser default with an interactive simulation that stops visitors from bouncing. It serves as a tactile toy that turns a minor user frustration into a few seconds of engagement.
What you would change first
Most users start by updating the text layers to match their company's specific voice. You can ask the chat to rewrite the space metaphors or change the navigation link to point to a status page instead of the homepage. After the text, you will likely want to tune the visual physics, such as the color of the event horizon or the sensitivity of the orbital controls, to ensure it fits your existing site's dark mode or brand palette.
When to skip it
Skip this template if your target audience uses older hardware or restricted corporate browsers that do not support WebGL2. The simulation is optimized, but it still requires a GPU to render the black hole effect smoothly. If your site is a text-heavy documentation hub where accessibility and low-bandwidth performance are the only priorities, a heavy 3D simulation might be an unnecessary distraction.
Supercharge your workflow with AI Automation
Automatio combines the power of AI agents, web automation, and smart integrations to help you accomplish more in less time.
Related Template Gallery
Frequently Asked Questions
Find answers to common questions about Black Hole 404, Three.js Interactive Error Page Template