Particle System Config Generator
Design particle effects interactively — fire, snow, sparks, smoke, and magic rings. Tune emitter type, gravity, turbulence, blend mode, colors, and copy the ready-to-use JavaScript config and update code.
Frequently Asked Questions
What is a particle system?▼
A particle system is a simulation technique that manages many small sprites (particles) with individual properties: position, velocity, life span, size, color, and opacity. An emitter spawns particles at a rate; each particle's properties evolve over its lifetime according to configured curves. They are used for fire, smoke, rain, snow, explosions, magic effects, and ambient ambience in games and UI.
What does emit rate control?▼
Emit rate is the number of new particles spawned per frame. At 60 FPS, an emit rate of 5 creates 300 new particles per second. Combined with lifespan, this determines the average visible count: particles ≈ emitRate × lifespan (in frames). High emit rates with short lifespans create dense, fast-moving effects. Low rates with long lifespans create sparse, lingering ones.
What is additive (lighter) blend mode?▼
Additive blending adds particle RGB values to the background instead of covering it. Dark areas stay dark, but overlapping bright particles accumulate into glowing white/yellow centers — the signature look of fire, lasers, magical auras, and energy effects. Use it for emissive/glowing particles. Use 'normal' (source-over) for opaque particles like smoke or bubbles.
How does gravity affect particles?▼
Gravity is a constant Y velocity added each frame (positive = downward, negative = upward). It simulates realistic projectile arcs. For fire, set slight negative gravity so particles drift upward. For rain or sparks falling, use positive gravity. Setting gravity to 0 with high turbulence creates floating debris or ambient particles.
What is turbulence in a particle system?▼
Turbulence adds random noise to each particle's velocity every frame, simulating wind or chaotic air currents. A small turbulence value (0.1-0.2) gives organic, natural-looking motion. High turbulence (0.5+) creates wild, erratic movement. Fire and smoke benefit from moderate turbulence; sparks and rain typically use little or none.
What is the difference between point, area, and ring emitters?▼
A point emitter spawns all particles from one coordinate. An area emitter distributes spawn positions across a rectangular region (good for rain, wide fire). A ring emitter spawns particles on a circle's circumference (good for explosions, magic circles). The emitter type combined with angle/spread controls the initial direction of particles.
Related Products
on GumroadTypeScript Quick Reference Toolkit
5 practical reference files for TypeScript developers: cheatsheet, TS vs JS comparison, 20 utility types with real examples, tsconfig best practices template, and 15 common mistakes guide. Print it. Keep it on your desk.
Buy on Gumroad →Developer Productivity Bundle
Stop rebuilding the same setup every project. 51 VSCode snippets, 40 Git aliases, 5 Docker Compose stacks, 5 GitHub Actions workflows, 5 README templates, and a dotfiles kit. Set up a professional dev environment in under an hour.
Buy on Gumroad →AI Prompt Engineering Toolkit
58 structured prompt templates for Claude, ChatGPT, and Gemini — organized by use case. Code Review, Debugging, Documentation, Architecture, and 10 model-specific tips. Stop writing prompts from scratch.
Buy on Gumroad →You Might Also Need
HTML5 Canvas API Playground
Interactive HTML5 Canvas animation playground. Choose animations, adjust parameters live, and copy generated JavaScript code for bouncing balls, sine waves, fireworks, and more.
Open free tool →
JS Prototype Chain Visualizer
Explore JavaScript prototype chains interactively. Visualize built-in types (Array, Map, Promise, Error) and custom classes with property lookup path diagrams.
Open free tool →
CSS Animation Generator
Generate CSS keyframe animations with live preview. Choose from 10 presets (fade, slide, bounce, shake, spin), configure duration, easing, delay, and iterations. Copy ready-to-use CSS instantly.
Open free tool →
More Free Tools
Related Articles
Astro 5 Complete Guide 2026: Content Layer, Server Islands & Performance
Complete Astro 5 guide for 2026: Content Layer API, Server Islands architecture, View Transitions, Actions, performance optimization, and deployment. Build faster websites with less JavaScript.
Bun 2.0 New Features Deep Dive: Bundler, Hot Reload, Package Manager & Runtime Upgrades
Bun 2.0 complete guide: new bundler improvements, hot reload enhancements, package manager upgrades, Node.js compatibility gains, and performance benchmarks for 2026.
Bun Runtime for Production 2026: Speed Benchmarks, Node.js Migration & Best Practices
Is Bun ready for production in 2026? Comprehensive guide to Bun runtime performance benchmarks vs Node.js, npm/package migration, built-in bundler, test runner, TypeScript support, and real-world production deployment best practices.
Bun 1.2: The Node.js Killer? Benchmarks & Real Migration Guide
Bun 1.2 benchmarks, new S3/SQLite APIs, and a practical guide to migrating your Node.js app. Is Bun ready for production in 2026?
Capacitor 6: Web-to-Native Bridge for Modern Web Apps
Capacitor 6 lets you build native iOS and Android apps from web code. Learn about the plugin API, native bridge architecture, VS Code extension, and when to choose Capacitor over React Native or Flutter.
Enjoying this tool? Get more like it.
Weekly developer tool guides, productivity playbooks & AI tricks. Free. No spam.
Unlock AI-Powered Dev Tools
- ⚡ AI Code Review, Doc Generator & SQL Builder
- ⚡ All premium templates & early access
- ⚡ Member discounts on Gumroad products
$9/mo after trial · Cancel anytime
Want the full toolkit?
Get DevPlaybook Pro
Every template, guide, boilerplate, and automation script in one bundle. 13 premium products — grab them all at once and save big.
MIT licensed · Instant download · No subscription
See what's included → Browse all deals →