ViratiAkiraNandhanReddy/404-silk-bg-three.js
A beautiful, responsive 404 error page with an animated silk-like background powered by Three.js and custom shaders. Built with modern HTML, CSS, and WebGL for smooth visuals and fluid performance.
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 (multiply0.05value)
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:
- Fork the repository
- Create a new branch
- Add your changes
- 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!

.png)