An Attack on Titan inspired 404 page with cinematic gradients, swinging ODM action, titan animations, and dramatic call-to-action styling.
Installation
npx 404lab@latest add aotThis will add the Aot component to your project automatically.
Usage
Import and render the component in your not-found.tsx file:
import Aot from "@/components/404/Aot"
export default function NotFoundPage() {
return Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Additional CSS classes for styling the container. |
This component requires no props by default. Just drop it in and it works!
Features
Cinematic Scene
Layered sky gradients, cloud motion, and wall textures create an epic battlefield atmosphere.
Character Animation
Multiple animated figures with custom keyframes for swinging, blinking, and movement loops.
Timed Hero Entrance
A staged fly-in effect triggers after mount for a dramatic first impression.
Interactive Highlights
Hover scaling, pulsing speech bubbles, and a bold CTA make the page feel lively and responsive.
Pure CSS Effects
Built with Tailwind utilities and inline keyframes, without external animation libraries.