404-matrix-rain

Minimal Matrix-style 404 page with responsive design and a safe "Go Back" button.

📎 Why this project?

A compact, static 404 page that gives visitors a visually engaging Matrix-like animation while providing a clear call-to-action to return safely. It's perfect for personal sites and GitHub Pages where you want a small, dependency-free 404 page.

Key goals:

• Fast & tiny: static HTML/CSS/JS only.
• Accessible fallback: a "Go Back" button that uses browser history or falls back to /.
• Responsive: adapts to mobile and desktop, touch-friendly controls.

✨ Features

• Canvas-based Matrix rain animation (customizable character set).
• Centered message with bright neon styling and a touch-friendly "Go Back" button.
• Responsive styling using clamp() and min() for fluid typography.
• Device Pixel Ratio (DPR) aware canvas for crisp rendering on high-DPI screens.
• No build step — drop these files into any static host.

📁 Project Structure

404-matrix-rain/
├── index.html         # Page markup
├── styles.css         # Styling and responsive rules
├── script.js          # Matrix rain animation + back button behavior
├── LICENSE            # Project license
└── README.md          # This file

🚀 Live Demo

/404-matrix-rain/

🛠️ Installation & Customization

1. Clone this repository:

git clone https://github.com/ViratiAkiraNandhanReddy/404-matrix-rain.git

2. Customize the message in index.html (the .msg block).

3. Tweak the animation in script.js:

• Change katakana characters to use a different character set.
• Adjust fontSize or replace the animation loop with requestAnimationFrame for smoother visuals.

4. Update colors and layout in styles.css to match your site's theme.

🔧 Developer notes

• script.js initializes the canvas to the window size and adapts to device pixel ratio.
• On resize the animation recalculates columns and font to maintain a readable effect on narrow screens.
• The Go Back button will call history.back() when possible; otherwise it redirects to / as a safe fallback.

Suggested improvements:

• Migrate to requestAnimationFrame for better performance and battery usage.
• Add ARIA roles and focus styles for enhanced accessibility.
• Expose config values (font size, speed, palette) as data attributes or a small config object.

🤝 Contributing

Pull requests are welcome!

To contribute:

1. Fork the repository
2. Create a new branch
3. Add your changes
4. Open a PR

⭐ Support

If you like this project, consider giving it a star ⭐ on GitHub — it helps a lot.

🌐 Social & Links

📝 License

© 2025 ViratiAkiraNandhanReddy. This project is licensed under the MIT License.

👤 Author

Developed by ViratiAkiraNandhanReddy

💤 - PASSIVE MAINTENANCE : Mean the project is no longer actively developed ( NO New Features And Regular Updates ), but the maintainer will respond only when an issue or PR is raised. Feel free to fork and continue development!

🌟 Questions, suggestions, or want to contribute? Open an issue or pull request on GitHub! 🌟