shadcn.io is not affiliated with official shadcn/ui
Animated Drop-In 404 Error Block for Svelte
A full-height 404 page for a kids' language app where three digit tiles drop onto a rule one after the other with a small overshoot, in CSS only, and a button replays the drop.
Installation
Overview
Let your 404 page arrive with some personality, with this animated 404 block for Svelte with Ark UI. It's the not-found page of Kitelark, a language-learning app for kids: the page's rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail. Three digit tiles stand on the band's lower rule as if on a floor: the first 4 drops in from behind the upper rule, then the last 4, then the 0 between them, each overshooting the floor a little and settling, all with CSS transitions and a spring-like curve and no animation library. Under the band come the heading, one sentence, a Shine Button link home, the only colored control, and "Drop them again", a ghost Button that replays the drop. With reduced motion the tiles simply appear. It's built from Shine Button, Button and Guides. For children's apps, creative portfolios and any product that can afford a smile on an error.
FAQ
How does the animation work without a library?
Each tile has a starting: style, a CSS rule for the first frame after it's inserted: it begins above the row and transparent, and a transition on its translate and opacity carries it to rest with cubic-bezier(0.34, 1.56, 0.64, 1), a curve that overshoots its target before settling. The three tiles wait 0, 250 and 500 ms (delay-0, delay-[250ms], delay-[500ms] in TILES), which is why the 0 lands last. The row clips the overshoot at the floor, so the tiles seem to press into it. Nothing loops and no script runs a frame.
What does Drop them again do?
It adds one to a counter, and the row of tiles is keyed by that counter, so React mounts a fresh row and the entrance runs from the start. A polite status line says "The numerals dropped again", with the round number so repeats are heard. It changes nothing else: the link and the words stay put, and the page keeps its height.
What happens with reduced motion?
The transition is switched off, so the tiles are simply there when the page loads and again after Drop them again, which still works and still announces itself. The only other motion is the words fading up once, and that's off too.
Is it accessible?
The tiles are decoration, hidden from assistive technology: the heading says "Page not found" and the sentence says "Error 404" in words. Pressing a tile nudges it down 2 px with CSS, but tiles aren't controls and aren't in the tab order. The two real controls, the link and the replay button, have visible focus and come after the heading in reading order.
What stays local, and how do I wire it?
The link goes to #: point it at your home route. The 404 status is your server's job, so render the page from your framework's not-found route. Drop them again is purely cosmetic and needs no wiring; delete it, and the counter with it, if you want a one-shot entrance.