404-particle-pro

Interactive particle-based 404 page where errors disintegrate and reassemble.

📎 Why 404-particle-pro?

404-particle-pro is a canvas-powered, generative-art 404 error page that transforms the classic “Page Not Found” into an immersive experience.

Instead of static text, the 404 is built from hundreds of particles that:

🐝 React to mouse & touch movement
🧲 Disintegrate on interaction
🔁 Smoothly reassemble into the original shape
⚡ Run entirely on Vanilla JavaScript

Designed for developers who care about details, motion, and polish.

📸 Preview

Desktop View

Mobile View

✨ Features

1. Particle Typography Engine

Text rendered via <canvas>
Pixel-scanned glyph generation
Each pixel becomes an independent particle
Base-position locking preserves glyph accuracy

2. Interactive Physics

Mouse & touch repulsion
Density-based force calculation
Maximum offset clamping (prevents shape distortion)
Smooth easing back to origin

3. High-DPI & Responsive Rendering

Device Pixel Ratio (DPR) aware
Retina-sharp visuals
Scales dynamically with viewport size
Debounced resize recalculation

4. Minimal UI Layer

Floating system-style message
Accessible reassemble button
Keyboard support:
- Enter / Space → Reassemble
- Escape → Exit error state

5. Zero Dependencies

No libraries
No frameworks
No assets
Single HTML file

🚀 Live Demo

/404-particle-pro/

🛠️ Installation & Setup

1. Clone the Repository

git clone https://github.com/ViratiAkiraNandhanReddy/404-particle-pro.git

2. Use as GitHub Pages 404

Rename the file:

index.html → 404.html

Push it to the root of your GitHub Pages repository.

GitHub Pages automatically serves 404.html for all invalid routes.

🧩 Customization

🔹 Change Displayed Text

ctx.fillText('404', adjustX, adjustY);

Replace with any short word (e.g. "ERROR", "LOST").

🔹 Particle Density

const densityCSS = 7;

Lower = fewer particles, higher = denser glyph.

🔹 Interaction Radius

const mouse = { radius: 120 };

Controls how far particles react to input.

🔹 Colors & Theme

:root {
  --bg: #0b0b0b;
  --gold: 255, 215, 0;
}

♿ Accessibility

Canvas marked aria-hidden="true"
Semantic button element
ARIA labels for screen readers
Keyboard-only navigation support
Focus-visible outlines

🧪 Browser Support

Chrome
Edge
Firefox
Safari
Mobile browsers

(Requires Canvas + ES6 support)

🤝 Contributing

Contributions are welcome:

Fork the repository
Create a new branch
Commit your changes
Open a Pull Request

⭐ Support

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

📝 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!

ViratiAkiraNandhanReddy/404-particle-pro