error 404 not-found animated page error 404 not-found animated page animated 404 error page page not found with animation
Error 404 Animated
Fetch pattern JSON:
curl https://webspire.de/patterns/error/animated.json animated.html
<section class="ws-error flex min-h-screen items-center justify-center bg-[var(--ws-error-bg)] px-6">
<div class="text-center">
<p class="error-float text-[8rem] font-black leading-none text-[var(--ws-error-action-bg)]/20 sm:text-[12rem]">404</p>
<h1 class="error-slide-up mt-2 text-2xl font-bold text-[var(--ws-error-text)] sm:text-3xl" style="animation-delay: 0.15s">Page not found</h1>
<p class="error-slide-up mt-4 text-lg text-[var(--ws-error-text-soft)]" style="animation-delay: 0.3s">Sorry, we couldn't find what you're looking for. The page may have moved or no longer exists.</p>
<div class="error-slide-up mt-8 flex flex-wrap justify-center gap-3" style="animation-delay: 0.45s">
<a href="#" class="rounded-xl bg-[var(--ws-error-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-error-action-text)] transition hover:opacity-90">Back to Home</a>
<a href="#" class="rounded-xl border border-[var(--ws-color-border)] px-6 py-3 text-sm font-semibold text-[var(--ws-error-text-soft)] transition hover:opacity-80">Contact Support</a>
</div>
</div>
</section>
Details
Responsive Dark Mode SSR Safe Copy & Paste
Stable Published
error404not-foundanimatedpage
Slots
| Name | Required | Description |
|---|---|---|
| code | Yes | Floating error code display. |
| message | Yes | Error message with staggered entrance. |
| actions | Yes | Navigation buttons with delayed entrance. |
Enhanced 404 page with two animations: the error code gently floats up and down, while the message and buttons slide up with staggered delays. Respects prefers-reduced-motion. Includes inline <style> with the keyframes.