404-silk-bg-three.js

A beautiful, responsive 404 error page featuring an animated silk-like background powered by Three.js shaders.

---

Features

• 🎨 Smooth animated silk-like background with auto-cycling colors
• 📱 Fully responsive design
• ⚡ Optimized WebGL rendering
• 🎯 Clean, modern UI
• ♿ Accessible error messaging

---

📸 Preview

Desktop View

Mobile View

---

Technologies

• Three.js - 3D graphics library for WebGL rendering
• Custom Shaders - Fragment shader for silk-like animation effect
• Responsive CSS - Flexible layout with clamp() for scaling

---

Browser Support

Requires a modern browser with WebGL support:

• Chrome/Edge 60+
• Firefox 55+
• Safari 15+

---

Usage

Deploy the files to your server and configure your 404 error page to point to index.html.

---

Customization

Edit values in three.js to customize:

• uSpeed - Animation speed (default: 0.5)
• uScale - Pattern scale (default: 1.0)
• uNoiseIntensity - Noise effect strength (default: 1.5)
• Hue cycle speed in the animate() function (multiply 0.05 value)

---

Performance

• Limits device pixel ratio to 2 for better performance
• Uses OrthographicCamera for efficient 2D rendering
• Antialiasing enabled for smooth visuals

---

🤝 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! 🌟