🚀 Try the 404 Page
Click any of these broken links to experience our custom 404 page:
💡 What You'll See
Our 404 page includes:
- 🌈 Animated rainbow "404" display
- 🎭 Rotating excuse generator (updates every 3 seconds)
- 🐱 Interactive cat facts spinner
- 🚀 Emergency navigation buttons
- 📊 Fun fake statistics
- 🛠️ Absurd troubleshooting tips
🎨 404 Page Features
🎭 Interactive Elements
- Excuse Generator: 15+ humorous explanations that rotate automatically every 3 seconds
- Cat Facts Spinner: Click the button to get random cat facts with spin animation
- Emergency Navigation: Quick links to Home, Docs, and Demos
- Fun Statistics: Randomized counters for pages found, robots consulted, and coffee consumed
💎 Design Features
- Rainbow Animation: Multi-color gradient background that shifts continuously
- Responsive Layout: Works perfectly on all device sizes
- Smooth Transitions: CSS animations with proper easing
- Theme Integration: Uses site's design tokens and respects dark/light mode
📝 Sample Content
🎭 Example Excuses
- 🐕 A dog ate the page (it was very tasty HTML)
- 🧙♂️ A wizard turned it into a toad
- 🛸 Aliens abducted it for their intergalactic library
- 🍕 It went out to get pizza and never came back
- 🤖 A robot uprising deleted it out of spite
- 🦄 A unicorn needed it to practice magic tricks
- 🎪 It ran away to join the circus
- 🧟♂️ Zombies ate it (they prefer semantic HTML)
🐱 Example Cat Facts
- Cats spend 70% of their lives sleeping, which explains why your page is taking a nap.
- A group of cats is called a 'clowder,' which is also what we call our development team.
- Cats can't taste sweetness, unlike this bitter 404 experience.
🔧 Technical Implementation
📁 File Locations
src/pages/404.tsx- Custom 404 page componentsrc/theme/NotFound/index.tsx- Docusaurus NotFound override
⚙️ Key Features
- Auto-rotating content: Uses React useEffect with setInterval
- CSS animations: Keyframe animations for rainbow effect
- State management: React hooks for interactive elements
- Responsive design: CSS Grid and Flexbox layouts
🎨 Customization
💡 Easy to Customize
- Add new excuses by extending the excuses array
- Change animation timing by modifying useEffect intervals
- Update cat facts with your own content
- Customize colors using CSS custom properties
- Modify navigation links for your site structure
🎪 Ready to Experience the Magic?
Click any broken link above to see our custom 404 page in action, or visit a non-existent URL manually!