Insane Particles is a clean, developer-focused playground showcasing 10 plug-and-play particle effects built with pure HTML, CSS, and JavaScript.
The idea is simple: preview → copy → download → use instantly.
Each effect runs inside a live preview container, and the exact HTML, CSS, and JS required is displayed as clean, copy-ready code. No frameworks, no libraries, no setup.
🌐 Website: https://insane-particles.vercel.app
- 🚀 Futuristic UI with smooth transitions
- 🎛 Instant effect switching
- 📥 One-click “Download Code” (auto-generated full HTML file)
- 🔗 One-click “Copy Code” panel
- 🧹 Clean lifecycle: init, update, destroy
- ⚡ Pure Vanilla JavaScript
- 🌙 Dark, minimalist theme
- 🔒 Safe, isolated particle environments
- HTML5
- CSS3
- Vanilla JavaScript
- Canvas API
No frameworks. No libraries. No build tools.
-
The preview container hosts a single particle system at a time.
-
Each effect is implemented as an isolated module.
-
Selecting an effect:
- Stops the current animation
- Removes all event listeners
- Loads and initializes the new system
-
The code panel updates to show the exact HTML, CSS, and JS needed.
-
Users can copy the code or download a ready-to-run file.
Only one effect runs at a time for clarity and performance.
- Floating Orbs
- Connecting Dots
- Mouse Trail
- Matrix Rain
- Fireflies
- Network Repulse
- Wave Field
- Explosion Burst
- Gravity Orbs
- Sparkle Stars
Each effect includes behavior, use cases, and inspiration details.
insane-particles/
├── index.html
├── style.css
├── index.js
└── README.md
Everything is intentionally kept in three core files for easy study, reuse, and customization.
- Open the website.
- Select a particle effect.
- Scroll to the code panel.
- Copy the HTML, CSS, and JS.
- Paste it into your project.
- Or download a complete ready-to-run file.
No setup required.
-
Only one effect runs at a time.
-
Some effects are heavier than others.
-
Recommended:
- Use lightweight effects for backgrounds
- Use heavier effects for hero sections or interactions
This project takes inspiration from widely known particle concepts and classic canvas experiments. All implementations are custom-written, but many visual ideas originate from the creative coding community.
If attribution is missing for any specific effect, you may open an issue.
Suggestions, improvements, and new particle ideas are welcome.
Guidelines:
- Keep everything framework-free
- Maintain clean lifecycle management
- Prioritize readability and performance
If this project helped you:
Buy me a coffee: https://buymeacoffee.com/webnate
MIT License Free to use, modify, and embed in personal or commercial projects.
Built clean. Built simple. Built for developers. ⚡