Guides · · Maxwell Prehoda
11 Animated 404 Page Examples That Are Still Live (and Why They Work)
The best 404 pages do two jobs in about two seconds: they make a broken link feel less like your fault, and they get the visitor back on a useful page. Animation helps with the first job. A short character moment, a joke that moves, or a tiny game turns an error into something people screenshot. The second job is still links and search.
Many 404 roundups recycle pages that no longer exist or have quietly gone static. We loaded every company page below in November 2026 and checked the actual asset (frame counts, file sizes, whether it loops), so what you read is what you will see. Each entry says what it is best for, how it is built, and the trap to avoid. Three are our own copy-paste CSS pieces you can drop into your 404 today.
1. Kualo's Space Invaders 404: Best for turning a dead end into a game with a reward
Platform: Website (browser game in JavaScript)
UK web host Kualo replaced its error message with a playable game. The page reads "Oh no! Space Invaders destroyed this page! Take revenge on them!", tells you to use Space to shoot and the arrow keys to move, and offers a hosting coupon if you score over 1,000 points. A link to go back sits right there for anyone who doesn't want to play.
It works because the game is on brand for a tech audience and it pays off. A reward gives people a reason to stay on a page that would otherwise bounce, and a hosting coupon is exactly the thing a hosting company wants a stray visitor to hold.
Pick this pattern when your audience is technical or playful and you have something real to give away.
Watch out for: Keyboard controls (Space and arrow keys) do nothing on a phone, where many broken links get tapped. If you build a game 404, add touch controls or make sure the plain links are just as visible as the game.
2. Airbnb's dropped ice cream: Best for a one-shot character moment beside useful links
Platform: Website (animated GIF, plays once)
Airbnb's 404 shows a girl holding an ice cream cone. As you read "Oops! We can't seem to find the page you're looking for", the scoop falls off, splats on the floor, and her smile turns into a sad little face. Next to her is a short list of helpful links: Home, Search, Help, Traveling on Airbnb, Hosting on Airbnb, Trust and Safety, Sitemap.
The detail that makes it good is that the GIF plays once and stops. We checked the file: about 190 frames and no loop flag, so the joke lands once and then the page goes quiet while you pick a link. Small disappointment, shared, then move on.
This is the safest pattern on the list for a large consumer brand: one short, kind animation and a page that is otherwise all navigation.
Watch out for: A GIF ignores prefers-reduced-motion and can't be paused. It is acceptable here because it plays once, but a looping version of the same idea would need a video with controls or a CSS animation you can switch off.
3. Mailchimp's horse in a hole: Best for brands with an offbeat, hand-drawn voice
Platform: Website (looping animated GIF)
Mailchimp's error page is a black ink drawing of a horse with its head stuck down a hole, tail swishing, looking for the page just like you are. It is weird, it is clearly drawn by a person, and it matches the illustration style Mailchimp has used across its brand.
The motion is minimal: a short loop where the tail and outline twitch, like a sketch that won't sit still. That restraint is why it survives being a loop. Nothing jumps toward the reader; it is texture, not an event.
Watch out for: The GIF we downloaded is 1,242 by 738 pixels and about 1.6 MB for 61 frames, which is heavy for a page whose visitors are already lost. Export loops like this as a muted MP4 or WebM, or animated WebP or AVIF, and you typically cut the weight by a large margin.
4. Lyft's car driving in circles: Best for a visual pun that fits your product
Platform: Website (2.4 second looping MP4)
Lyft's 404 says "Ooops... Sorry, we can't find that page" above a small 3D scene: a car drives round and round a tree on a traffic island. It is a ride company admitting it is lost, which is the whole joke, told in under three seconds.
It is built the modern way: a muted, autoplaying, looping MP4 of about 165 KB, not a GIF. That gets you full color, smooth motion and a small file. For a 404 that loops forever, that format choice matters more than the illustration.
If your product has an obvious "lost" metaphor (a map, a delivery, a search, a ride), a looping pun like this is the quickest way to get a smile without writing a single joke.
Watch out for: Autoplaying video still needs a reduced-motion plan. Swap it for the poster frame inside a prefers-reduced-motion media query, or pause it with one line of script when the user has asked for less motion.
5. GitHub's Star Wars 404: Best for developer tools: a joke plus a search box
Platform: Website (layered inline SVG illustrations)
GitHub's 404 is a Star Wars gag, alt text "This is not the web page you are looking for", drawn as two separate SVG layers: a desert background and the illustration in front. Under it is the thing developers actually need, a search field labelled "Find code, projects, and people on GitHub", plus links to Support, GitHub Status and @githubstatus.
Today the page is static. We include it because the structure is the best template on this list for a product people arrive at from deep links: a joke that costs one glance, then search and a status link for when the 404 is really an outage. The layered art is also exactly how you would set up a gentle parallax if you want motion.
Watch out for: If you add pointer-driven parallax to layered art, keep the movement to a few pixels, skip it on touch devices and turn it off under prefers-reduced-motion. Big parallax on an error page can make some visitors feel ill.
6. Chrome's offline dino game: Best for an error state people hit again and again
Platform: Google Chrome (built-in, also at chrome://dino)
Strictly this is Chrome's "you are offline" page, not a 404, but it is the most famous animated error screen there is. Press Space and the pixel T-Rex starts running, jumping cacti and later ducking pterodactyls. Google's Chrome team wrote that it was designed by Edward Jung, Sebastien Gabriel and Alan Bettes, shipped to all platforms by December 2014, and was being played about 270 million times a month at the time of that write-up.
The lesson for a 404 is about matching the moment. Being offline means waiting with nothing to do, so a game fits. Most 404 visitors are not stuck, they just need a link, which is why the best 404s are lighter than this. If your error can last a while (offline, maintenance, a queue), a small game is a gift.
Watch out for: Google later gave enterprise admins a way to disable the game because it distracted students and workers. A game on an error page you show often can become the thing people do instead of their task.
7. LottieFiles' free 404 animations: Best for dropping in a ready-made illustration fast
Platform: Lottie JSON, GIF and MP4 (free and paid packs)
If you want a character animation but don't have an illustrator, LottieFiles hosts hundreds of free "page not found" animations made by its community: astronauts, broken robots, lost cats, unplugged cables. Most can be played as Lottie, which stays sharp at any size and is usually smaller than a GIF of the same scene.
Their own write-up of animated 404 pages is also worth a scan for ideas, from Airbnb and Mailchimp to concept shots from Dribbble designers.
Watch out for: Each file carries its own creator credit and license terms, so read them before shipping. Lottie also needs a player script on the page; for one small loop on a 404, check that the runtime isn't heavier than the animation is worth.
8. SVGator's 404 animation roundup: Best for browsing styles before you commission art
Platform: Article with SVG and GIF examples
SVGator, which makes a browser-based SVG animation tool, keeps one of the biggest galleries of animated 404 concepts online, around sixty of them, grouped by approach: character-led, themed, game-inspired, interactive and 3D. Most are Dribbble and Behance shots by named designers, plus brand pages such as Lyft and Redfin.
Use it as a mood board. Pick the category that fits your brand first (a character, a game, a pun, pure typography), then brief a designer or a tool with that one direction instead of "make our 404 fun".
Watch out for: Most entries are concepts, not live pages, and the article does not say which are still online. Treat them as style references, and check any brand example yourself before you cite it.
9. Our 404 Glitch Text: Best for a no-image 404 for tech and dev products
Platform: Motions directory, free, pure CSS Ours
Sometimes the best 404 illustration is the number itself. This one is a big 404 whose digits glitch one at a time: each digit jumps, skews and splits into red and cyan, then snaps back, above a quiet PAGE NOT FOUND line. All three digits share one keyframe and each has its own delay, so the glitch travels across the number.
It is text, so it weighs almost nothing, scales to any screen and stays readable to screen readers. The color and size come from two custom properties. Pair it with search and three links and you have a complete 404 in a few lines; the Glitch Text collection has more variations.
Watch out for: Glitches are flashes. Keep the bursts short and spaced out as this one does (a few frames every 2.7 seconds), and let the prefers-reduced-motion guard hold it still for people who ask for less motion.
10. Our No Signal Static: Best for media, video and streaming products
Platform: Motions directory, free, pure CSS and inline SVG Ours
A small screen full of TV static with a NO SIGNAL label flickering in front, and a dark band rolling down it like a drifting vertical hold. For a video app, a streaming service or a podcast player, it says "this channel isn't here" with no words of explanation.
The noise is a single inline SVG turbulence filter drawn once, then jumped between offsets with steps(), so it looks like live static without redrawing anything every frame. That keeps it cheap even on a low-end phone.
Watch out for: Static and flicker can bother people with motion or light sensitivity. Keep the panel small, as here, rather than filling the screen, and keep the reduced-motion guard that freezes it.
11. Our Parallax Starfield: Best for the classic lost-in-space 404 without images
Platform: Motions directory, free, pure CSS Ours
Lost in space is the most common 404 theme for a reason: it is calm, universal and leaves room for your message. This background gives you the sky: three layers of stars drift upward at different speeds over a deep night gradient, so the near stars pass the far ones.
Each layer is one tiled gradient moved by exactly one tile, so it loops seamlessly and costs no image requests. Put your 404 and links on top, or browse the Space Backgrounds collection for shooting stars, nebulas and black holes.
Watch out for: Text over a moving background needs strong contrast. Keep your copy on a solid or blurred panel, and check it still reads when the reduced-motion guard stops the drift.
How to choose a 404 animation
Match it to your audience
A game like Kualo's suits a technical, playful crowd and a brand that can offer a reward. Consumer brands do better with one short, kind moment like Airbnb's falling scoop. Developer tools should copy GitHub's structure: one glance of humor, then search and a status link. If your product has a natural "lost" pun, Lyft shows how far one looping scene can go.
Match it to the file budget
A 404 visitor is already annoyed, so don't make them wait. CSS and text-based pieces like our 404 Glitch Text weigh almost nothing. For illustrated loops, a muted MP4 like Lyft's beats a GIF like Mailchimp's 1.6 MB file. Lottie sits in between but adds a player script.
Match it to the motion settings
Play once or loop quietly, never flash, and respect prefers-reduced-motion. GIFs can't do that, CSS and video can. Whatever you choose, the links and search box must be visible without scrolling and must work without the animation. Our reduced motion guide shows the patterns.
Ship a better 404 this afternoon
Open your own 404 right now: type your domain plus a made-up path. If it is the default server page, you have an easy win. Write one honest sentence in your brand's voice, add search and three useful links, then add exactly one piece of motion from this list.
If you want something made for your brand instead, describe it to the creator ("our mascot looks around a dark room with a flashlight, 3 seconds, then stops") and get production-ready CSS keyframes with a reduced-motion version built in.
Make an animated 404 page header for a developer tools brand. A large "404" where each digit glitches once in turn, about 300ms per digit, then everything rests for 3 seconds. Use steps() for the glitch and ease-out for the settle. Under it, a one-line apology and a search field that stay perfectly still. With prefers-reduced-motion, show the 404 static with no glitch at all. Pure HTML and CSS, color and size from two custom properties.
Common questions
What should a good 404 page include?
A short, honest message that the page is missing, a way back (home link, search box, and two or three popular pages), and something in your brand's voice. Animation is optional; navigation is not. GitHub's 404, with its search field and status links, is a good model.
Do animated 404 pages hurt SEO?
The animation itself doesn't. What matters is that the page returns a real 404 status code (not a 200 "soft 404"), and that it loads quickly. Keep heavy GIFs off it, prefer CSS or a small video, and link to your important pages so visitors and crawlers can move on.
How do I make an animated 404 page with CSS?
Animate the 404 text itself with @keyframes (a glitch, a bounce or a wobble), or put a CSS animated background behind it. Use transform and opacity so it stays smooth, and wrap the motion in a prefers-reduced-motion check. Our 404 Glitch Text is a complete example you can copy.
Should a 404 page have a game?
Only if it fits your audience and you can make it work on phones. Kualo's Space Invaders page works because it offers a coupon and keeps a back link visible. Chrome's dino game fits an offline page, where people are stuck waiting. On most sites a short joke and good links serve visitors better.
What format is best for a 404 animation: GIF, Lottie, video or CSS?
CSS for text and simple shapes, since it is the lightest and respects reduced-motion settings. A muted looping MP4 or WebM for illustrated scenes, as Lyft does. Lottie for vector characters if you already use a Lottie player. GIF last: it is heavy and can't be paused.