tsParticles - v4.5.3
    Preparing search index...

    Emitters

    The emitters plugin provides particle emitters: objects that generate particles over time with options for position, shape, emission rate, life cycle, and particle customization.

    Property Type Default Notes
    autoPlay boolean true Auto-starts the emitter
    direction MoveDirection / number undefined Emission direction (enum, key or number)
    domId string undefined ID of the connected DOM element
    draggable boolean false When true, the emitter can be moved by dragging it inside the shape area
    draw boolean false When true, the emitter shape is drawn on the canvas
    fill boolean true When true particles spawn inside the area
    life EmitterLife { "wait": false } Life options (count, delay, duration, wait)
    name string undefined Emitter name
    particles IParticlesOptions / IParticlesOptions[] undefined Options for emitted particles (can be single or array)
    position IRangedCoordinates undefined Relative emitter position
    rate EmitterRate { "quantity": 1, "delay": 0.1 } Rate options (quantity per emission, delay between emissions)
    shape EmitterShape { "type": "square", "options": {} } Emitter shape (type and options)
    size EmitterSize undefined Emitter area size (mode, width, height)
    spawn EmitterSpawn {} Spawn options (fill/stroke)
    spawnFillColor AnimatableColor undefined Fill color for spawned particles
    spawnStrokeColor AnimatableColor undefined Stroke color for spawned particles
    startCount number 0 Number of initial particles generated by the emitter
    • EmitterRate: { "quantity": 1, "delay": 0.1 }
    • EmitterSize: { "mode": "percent", "width": 0, "height": 0 }
    • EmitterShape: { "type": "square", "options": {} }
    • EmitterLife: { "wait": false }
    • EmitterSpawn: {} (can contain fill and stroke if specified)
    {
      "emitters": {
        "direction": "top",
        "position": { "x": 50, "y": 90 },
        "size": { "width": 40, "height": 0, "mode": "percent" },
        "rate": { "quantity": 4, "delay": 0.15 },
        "particles": { "move": { "speed": 2 } }
      }
    }

    Emitters are drawn behind particles when draw is enabled and can be made interactive with draggable:

    {
      "emitters": {
        "draw": true,
        "draggable": true,
        "position": { "x": 50, "y": 50 },
        "size": { "width": 20, "height": 20, "mode": "percent" },
        "spawn": {
          "fill": { "color": "#ff0000" },
          "stroke": { "color": "#000000", "width": 2 }
        }
      }
    }
    • draw (default false): renders the emitter shape, filled with spawn.fill.color (default black) and stroked with spawn.stroke.color when provided.
    • draggable (default false): when true, the emitter can be grabbed and dragged inside its shape bounds; emitters linked to a domId are never draggable.
    • particles is deep-cloned on load and can be a single object or an array.
    • size is optional and auto-initialized inside load if provided in the input data.
    • For full details of nested fields see the classes under plugins/emitters/src/Options/Classes/.
    • Source class: plugins/emitters/src/Options/Classes/Emitter.ts
    • Sub-classes: EmitterRate.ts, EmitterSize.ts, EmitterShape.ts, EmitterSpawn.ts, EmitterLife.ts

    Settings
    Member Visibility

    On This Page
    Emitters