Free Open Source Particles JS v1.0.0
A simple, customizable particle system for web backgrounds, effects, and interactions. Multiple particle types, three animation modes, and performance optimizations. Perfect for adding life to any website.Particles That Pop. Backgrounds That Breathe.
Particles JS brings your website to life with smooth, customizable particle animations. Choose from multiple visual styles—circles, stars, confetti, triangles, images, or emojis—and three animation modes: floating flow, falling rain, or explosive fireworks. Lightweight, performant, and easy to configure.
Key Features
- Multiple Particle Types — circle, star, confetti, triangle, image, emoji.
- Three Animation Modes — flow (floating), rain (falling), firework (bursts).
- Mouse Interaction — particles repel or react to mouse movement.
- Connect Particles — draw lines between nearby particles.
- Trails & Effects — optional trails on bursts and fireworks.
- Performance Optimized — viewport culling, shape caching, throttled drawing.
- Responsive — auto-resizes with window.
- Customizable Colors — rainbow mode or custom color palette.
Installation
Important: If you're fetching the script from a remote location, include integrity and crossorigin="anonymous" to ensure security and prevent tampering.
<script
src="https://opensource.josebamirena.com/particles/1.0.0/dist/particles.min.js"
integrity="sha384-ovQETGtGwaVATmqCOoMNIo1bur9NDv5+pG2BzxOqa5/M7BvYh3XhYjG607gXu/7D"
crossorigin="anonymous">
</script>Basic HTML Setup
<div id="particles-container" aria-hidden="true"></div>Basic CSS Styling
#particles-container {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
}
#particles-container canvas {
pointer-events: auto;
display: block;
width: 100%;
height: 100%;
}Basic Initialization
<script>
Particles.init({
container: 'particles-container',
type: 'circle',
mode: 'flow',
count: 120,
sizeMin: 4,
sizeMax: 12,
opacity: 0.8,
gravity: 0.05,
backgroundParticles: true,
trails: false
});
</script>Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
| container | string | 'particles-container' | Particles renderization container ID |
| type | string | 'circle' | 'circle', 'star', 'confetti', 'triangle', 'image', 'emoji' |
| mode | string | 'flow' | 'flow', 'rain', 'firework' |
| imageUrl | string/array | null | URL or array of image URLs (required for type 'image') |
| emoji | string/array | null | Emoji character or array (required for type 'emoji') |
| count | number | 80 | Number of particles |
| colors | array | ['#ff006e', '#8338ec', '#3a86ff', '#ffbe0b', '#fb5607'] | Color palette |
| useRainbow | boolean | false | Use rainbow colors instead of palette |
| sizeMin | number | 5 | Minimum particle size (px) |
| sizeMax | number | 12 | Maximum particle size (px) |
| speed | number | 1.0 | Movement speed multiplier |
| connect | boolean | false | Draw lines between nearby particles |
| connectDistance | number | 120 | Maximum distance for connections (px) |
| connectOpacity | number | 0.6 | Opacity of connection lines |
| grabRadius | number | 100 | Mouse interaction radius (px) |
| opacity | number | 0.85 | Particle opacity |
| backgroundParticles | boolean | true | Enable background particles |
| gravity | number | 0.08 | Gravity effect strength |
| rotationSpeed | number | 0.03 | Rotation speed for non-circle particles |
| spawnRate | number | 0.005 | Particle spawn rate (firework mode) |
| trails | boolean | false | Enable trail effects |
| trailLength | number | 16 | Length of particle trails |
| trailOpacity | number | 0.6 | Opacity of trail effects |
Examples
Stars Fireworks — Stars exploding with colorful trails.
Particles.init({
type: 'star',
mode: 'firework',
spawnRate: 0.025,
trails: true
});Colorful DNA Circles — Floating circles with connecting lines.
Particles.init({
type: 'circle',
burst: false,
connect: true,
connectOpacity: 0.90,
connectDistance: 130
});Floating Colorful Stars — Gentle floating stars with connections.
Particles.init({
type: 'star',
mode: 'flow',
count: 140,
sizeMin: 5,
sizeMax: 14,
colors: ['#ffffff', '#ffe066', '#ff99cc'],
opacity: 0.9,
connect: true,
connectDistance: 140,
connectOpacity: 0.25
});Smooth Falling Confetti Rain — Colorful confetti falling gracefully.
Particles.init({
type: 'confetti',
mode: 'rain',
count: 180,
sizeMin: 6,
sizeMax: 18,
gravity: 0.18,
rotationSpeed: 0.05,
opacity: 0.92
});Rocket Emoji Floating — 🚀 emojis floating in space.
Particles.init({
type: 'emoji',
emoji: '🚀',
mode: 'flow',
count: 80,
sizeMin: 18,
sizeMax: 38,
opacity: 0.95,
gravity: 0.02,
rotationSpeed: 0.04
});Mixed Emoji Rain — Party emojis raining down.
Particles.init({
type: 'emoji',
emoji: ['🎉', '✨', '💥', '🌈', '🔥'],
mode: 'rain',
count: 150,
sizeMin: 20,
sizeMax: 45,
gravity: 0.12,
rotationSpeed: 0.06
});Download Particles JS v1.0.0 Files
Important: Please do not fetch files directly from this website. Remote fetching is blocked for security and performance reasons.
Follow the instructions and use my opensource CDN.
- particles.min.js— Minified JavaScript code
11.7 kB. CHECKSUM: 57d596cbb520eec278269a8f5a6a4e58 - particles.js— Source JavaScript code, unminified
22.1 kB. CHECKSUM: 1e7e621c27ef1afc2547ca2c44272e7c - particles-1.0.0.zip— Complete package with docs & examples
12.9 kB. CHECKSUM: 5d49bc686866caf76415fb588532008c - README— MD format documentation
- LICENSE— MIT license
All Freebies are open source under the MIT License. Free for personal and commercial use. A link back is appreciated but never required.
