Does the exported JSON work in any framework?

Yes. The config is tsParticles-compatible, so it works with the official React, Vue, Svelte, Angular, and vanilla JS bindings. Install the matching tsparticles wrapper, pass the JSON as the options prop, and the effect renders identically to the preview here.

How many particles can I push before it slows down?

On a modern laptop, 200-400 particles run smoothly at 60 fps. Past 500 you'll see jitter on mid-range phones. Star and polygon shapes cost more than circles because of the path rendering. If you target mobile, stay near 100-150 with low interaction.

Why does the animation look different after I export the HTML?

The HTML snippet stretches the canvas to its parent container's size. If you paste it into a tiny div, particles get cramped. Make sure the wrapper has a fixed height (e.g. 100vh or 400px) and the canvas will scale to match.

Can I use a custom image as the particle shape?

Not from the UI, but the underlying engine supports it. Export the JSON, then edit the shape.options.image entry to point at your PNG or SVG. The image renders at the size and opacity each particle was assigned by the simulation.

Will the animation affect page performance scores?

It adds roughly 30-80 KB gzipped for the engine plus continuous canvas repaints. For Lighthouse, lower particle count and disable interaction on mobile. Loading the engine lazily after the hero is visible keeps Largest Contentful Paint clean.

Particle Effect Generator

Create customizable particle animations

Preview

Background

Preset

Settings

Particle Count120

Speed (Min)0.5

Speed (Max)2

Size Range (Min)1

Size Range (Max)5

Opacity0.9

Fade animation

Shape

Colors

Color animation

Gravity0

Wind0.3

Bounce

Interaction

Hover

Click

Export

{
  "fullScreen": {
    "enable": false
  },
  "background": {
    "color": {
      "value": "#1e293b"
    }
  },
  "particles": {
    "number": {
      "value": 120,
      "density": {
        "enable": true
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle"
    },
    "opacity": {
      "value": {
        "min": 0.4,
        "max": 0.9
      }
    },
    "size": {
      "value": {
        "min": 1,
        "max": 5
      }
    },
    "move": {
      "enable": true,
      "speed": {
        "min": 0.5,
        "max": 2
      },
      "direction": "bottom",
      "straight": false,
      "outModes": {
        "default": "out"
      },
      "drift": 0.3
    },
    "wobble": {
      "enable": true,
      "distance": 10,
      "speed": 5
    }
  },
  "interactivity": {
    "events": {
      "onHover": {
        "enable": true,
        "mode": "repulse"
      }
    },
    "modes": {
      "repulse": {
        "distance": 80,
        "duration": 0.4
      }
    }
  }
}

What is Particle Effect Generator?

Design and preview particle animations for your website or app. Set particle count, speed, size, color, shape, interaction, and physics to create effects like snow, confetti, fireflies, or galaxy patterns. Export the config as ready-to-use code.

Built on tsParticles, so the JSON you copy drops straight into a React, Vue, or vanilla project. Mouse and click interactions (repulse, grab, bubble, push, remove), opacity fade, and color (hue) animation all work out of the box, and the HTML export bundles the engine via CDN so you can paste it into a static page without a build step. You can also record the live preview as an animated GIF to share the effect anywhere.

How to use

Pick a preset (snow, confetti, fireflies, bubbles, galaxy, network, fireworks, fire, smoke) or start from scratch.
Fine-tune particle properties: count, speed, size range, colors, shapes, opacity, and physics like gravity and bounce.
Preview the animation live, then copy the tsParticles JSON config, export a standalone HTML snippet, or capture the preview as an animated GIF.

When to use

Adding a snow or confetti layer to a holiday or product-launch landing page.
Prototyping a hero-section background for a SaaS site before bringing in a designer.
Creating a galaxy or firefly backdrop for a portfolio or game menu screen.

Result

A web developer selects the snow preset, increases particle count to 200, adds a slight wind drift, and copies the config JSON to add a winter effect to their holiday landing page.

FAQ

Does the exported JSON work in any framework?: Yes. The config is tsParticles-compatible, so it works with the official React, Vue, Svelte, Angular, and vanilla JS bindings. Install the matching tsparticles wrapper, pass the JSON as the options prop, and the effect renders identically to the preview here.
How many particles can I push before it slows down?: On a modern laptop, 200-400 particles run smoothly at 60 fps. Past 500 you'll see jitter on mid-range phones. Star and polygon shapes cost more than circles because of the path rendering. If you target mobile, stay near 100-150 with low interaction.
Why does the animation look different after I export the HTML?: The HTML snippet stretches the canvas to its parent container's size. If you paste it into a tiny div, particles get cramped. Make sure the wrapper has a fixed height (e.g. 100vh or 400px) and the canvas will scale to match.
Can I use a custom image as the particle shape?: Not from the UI, but the underlying engine supports it. Export the JSON, then edit the shape.options.image entry to point at your PNG or SVG. The image renders at the size and opacity each particle was assigned by the simulation.
Will the animation affect page performance scores?: It adds roughly 30-80 KB gzipped for the engine plus continuous canvas repaints. For Lighthouse, lower particle count and disable interaction on mobile. Loading the engine lazily after the hero is visible keeps Largest Contentful Paint clean.

Particle Effect Generator

What is Particle Effect Generator?

How to use

When to use

Result

FAQ

Related Tools

Texture Generator

Org Chart Maker

CSS Animation Generator

YouTube Thumbnail Maker

Word Cloud Generator

Timeline Maker

Particle Effect Generator