Animated 404 Page Section with Digits You Can Throw
Overview
A 404 page section for React and Next.js where the digits drop in, bounce on a floor and can be picked up and thrown. The physics is about 100 lines of plain code with no physics library, and a clear link home stays above it all.
Nobody wants to land on a 404, so this one gives them something to do on the way out. The digits fall from above, bounce, knock into each other and wobble back upright, because they're weighted at the bottom like a roly-poly toy. Grab one and throw it, and it keeps your speed, bounces off the walls and pushes the others along.
Details
- Category
- 404
- Interaction
- On Load + Drag + On Click
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 118 / Hero
Zipper Reveal Hero with a Draggable Pull, on Canvas
On Load · Drag · On Scroll · On Click
No. 117 / Cards
Tear Strip Envelope Reveal with a Draggable Tab, on Canvas
On Load · Drag · On Click
No. 116 / Cards
Stretchy Cloth Image Card You Can Grab, with Canvas Physics
On Load · Drag · Mouse Move · On Click
(02)FAQ
Animated 404 Page Section with Digits You Can Throw — FAQ
01How do I use it as my 404 page?
In Next.js, render it from app/not-found.tsx. Set homeHref, or pass your own next/link through the action prop for client-side navigation.
02Can I use it for other errors?
Yes. Set code to any short string, like 500 or 403, and change eyebrow, heading and message to match.
03How do I change how the digits behave?
gravity and bounce are props. The wobble, floor grip and collision bounce are named constants at the top of the file.
04Does it work on phones and with a keyboard?
Yes. Digits can be dragged with a finger, and swiping anywhere else still scrolls the page. Each digit is a button, so Tab reaches it and Enter or Space tosses it into the air.
05What happens with reduced motion?
The digits sit still on the floor, can't be thrown and leave the tab order. The clouds stay still too, and the heading and link work as normal.