RSK World - Particle Background Effect | Interactive Particles, Mouse Effects, Canvas | RSK World

Particles & Mouse Connections & Themes Trails & Glow Explosions & Black Hole Vanilla JS

Particle Background Effect is an interactive particle system with HTML5 Canvas. Features: particle count/speed/size, connection lines (solid/dashed/dotted), mouse repel or attract, 7 background themes (Default, Dark, Ocean, Sunset, Matrix, Aurora, Space). Advanced: trails, motion blur, glow, rainbow color, particle shapes (circle/square/triangle), pulse, black hole (center pull), click explosions, jitter. Settings panel: sliders and toggles; reset to default. Responsive, touch support. index.html, demo.html (Classic, Galaxy, Firefly demos), style.css, script.js. By rskworld.in.

If you find this Particle Background Effect project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Particle Background Effect

Particle System & Mouse

ParticleSystem and Particle classes in script.js. Particles move with base speed, bounce off walls. Mouse repel or attract within radius; force scales with distance. Document and canvas mouse tracking so interaction works over overlay content.

ParticleSystem: canvas, particles array, mouse, settings
Particle: position, speed, baseSpeed, size, trail
Mouse mode: repel or attract; mouseRadius 50–300
Damping: speed blended back toward baseSpeed

Project Structure & Files

particle-background/ with index.html (main demo with settings panel), demo.html (Classic, Galaxy, Firefly sections), style.css (themes, panel, responsive), script.js (particle logic, UI bindings). No build step. Open index.html or serve folder.

particle-background/ – index.html, demo.html, style.css, script.js, README.md, LICENSE
No build step – open index.html or static server
Font Awesome 6 (CDN) for icons
Zero dependencies; vanilla HTML, CSS, JavaScript

Settings Panel & Themes

Gear button opens panel: particle count (50–500), speed, size, connection distance, color picker, mouse on/off, mouse radius, mouse mode (repel/attract), connection style (solid/dashed/dotted), background theme (7 options). Advanced: trails, motion blur, glow, rainbow, shape, pulse, black hole, explosions, jitter. Reset to default.

Themes: default, dark, ocean, sunset, matrix, aurora, space
body classes: theme-dark, theme-ocean, etc. (CSS variables)
All controls bound in setupSettingsControls, setupAdvancedControls
resetSettings() syncs DOM and recreates particles

Connections & Effects

Particles within connection distance draw lines; opacity by distance. Optional trails (per-particle trail array), motion blur (clear with alpha), glow (radial gradient), rainbow (HSL over time), pulse (size sine), black hole (center force), click explosions (spawn particles on click).

connectParticles() – O(n²) pairs, line dash for solid/dashed/dotted
Trails: trail.push position; draw line segments with alpha
Black hole: applyBlackHole() adds force toward center
Explosions: explosionParticles with life, decay, gravity

Shapes & Drawing

Particle shape: circle (arc), square (fillRect), triangle (moveTo/lineTo). Glow uses createRadialGradient. Rainbow and HSL supported; hslToRgbString for stroke opacity. Canvas cleared each frame or motion-blur overlay.

Particle.draw() – shape from settings.particleShape
Glow – radial gradient with color stops
HSL – getRainbowColor(), hslToRgbString for rgba
requestAnimationFrame loop in animate()

What You Get

Static HTML/CSS/JS: particle-background/ folder with index.html, demo.html, style.css, script.js, README.md, LICENSE (MIT). No build step. Open index.html or serve folder.

Complete source – particle-background/ with HTML, CSS, JS
No build step – open index.html or static server
README.md, LICENSE (MIT) included
Technologies: HTML5 Canvas, CSS3, Vanilla JS. © 2026 RSK World.

Usage

Open index.html. Use gear to open settings: adjust count, speed, size, connections, color, mouse options, theme. Enable trails, glow, explosions, black hole, etc. Click on canvas when explosions are on. demo.html shows Classic, Galaxy, Firefly variants.

particle-background/index.html – main page with control panel
script.js: ParticleSystem, Particle, connectParticles, applyBlackHole
Accessibility: aria-labels, Escape closes panel
Author: RSK World | rskworld.in

Project Features

Interactive particles, mouse repel/attract, connection lines (solid/dashed/dotted), 7 themes, trails, motion blur, glow, rainbow, shapes (circle/square/triangle), pulse, black hole, click explosions, jitter. Full settings panel and reset.

Particles – bounce, mouse force, optional jitter/trails
Settings panel – sliders, color, checkboxes, selects
Effects – glow, pulse, rainbow, motion blur
Demo page – Classic, Galaxy, Firefly (inline in demo.html)

Credits & Acknowledgments

Particle Background Effect by RSK World. Interactive particle system with HTML5 Canvas, mouse effects, and control panel for learning canvas and vanilla JS.

Particle Background Effect – canvas, particles, connections, themes
RSK World – Project creator and educational platform
Author: Molla Samser (Founder - RSK World)
Website: https://rskworld.in
Email: info@rskworld.com | +91 93305 39277
© 2026 RSK World. All rights reserved.

Support & Contact

For Particle Background Effect customization or integration help, please contact us.

Email: info@rskworld.com
Phone: +91 93305 39277
Website: RSKWORLD.in
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India - 713147
Author: Molla Samser (Founder, RSK World)
Particle Background Effect - README
Technical Support Available
UI Component Requests Welcome

Additional Sponsored Content

Download Particle Background Effect

Get the complete Particle Background Effect project. You can view the files or download the source code directly.

Download Particle Background Effect

Technologies

HTML5 Canvas

Particle System

Responsive

Accessibility

Vanilla JS

Mobile UI

iOS Human Interface Guidelines inspired list and navigation UI.

View Project

View All Projects

Theme Settings

Color Scheme

Display Options

Font Size

Particle Background Effect

Particle System & Mouse

Project Structure & Files

Settings Panel & Themes

Connections & Effects

Shapes & Drawing

What You Get

Usage

Project Features

Credits & Acknowledgments

Support & Contact

Featured Content

Additional Sponsored Content

Download Particle Background Effect

Quick Links

Categories

Technologies

Featured Projects

Image Hover Effects

Magnetic Button Effect

Card Flip Effect

CSS Neon Button Hover

iOS-Style List & Navigation