Design an effect by looking at it, then take the PixiJS v8 code with you.

Preparing previews…

Base

What the layers run over. It can be an image — one of the built-ins or your own file — or a pattern, which paints its own colour instead of changing what is under it. Picking a new one always replaces the old one.

Layers

Effects apply top to bottom — the first layer runs first. Drag a layer by its ⋮⋮ handle to change the order. Click a layer's name to open its sliders, the switch mutes it, ⋯ holds solo / duplicate / reorder / shader code. Next to any slider, anim sweeps that value over time.
FPS – – 0 fx

Couldn't start the engine

This needs WebGL2 and loads the PixiJS engine from a CDN. Check your internet connection and reload.

Emitters 1 / 6 one exported file · the top one is drawn in front — which only shows once a layer's Blend is Normal, since Add is a sum and a sum has no order

▾Emission rate, lifetime, spawn area

Fires particles per wave every wave interval seconds. Emit time is how long it keeps going — 0 means forever, a short time makes a one-off burst. Spawn sweep fills the spawn area in over the emission window instead of all at once, measured as an angle around the emitter — a slash then travels along its arc the way a blade would, and a ring fills like a clock hand. Sweep width is how much of the area is alive at any moment. It needs an emit time to run against (with 0 it loops once a second).

Trail along the emitter's path decides what happens when the emitter moves — drag on the preview to feel the difference. On, the waves due this frame are spread along the distance it travelled, so a fast-moving emitter leaves one unbroken trail; in the exported emitter this is updateOwnerPos(x, y), called every frame with whatever the effect is attached to. Off, the emitter is just somewhere else now and every wave fires at the new spot — the same as calling setPosition(x, y). Trails almost always want it on.
Trail along the emitter's path
Carry particles with the emitter local space
Spawn area
Spawn sweep

▾Motionspeed, gravity, forces

Point along travel direction
At the edge of the canvas

▾Lookshape, size, blend

Particle shape
Blend

▾Colour over lifegradient, alpha, fade

Random colour per particle

▾Attractor pull, push, vortex

One point on the canvas that every particle feels. A positive pull sucks them in, a negative one blows them away, and swirl turns them around it — pull plus swirl is a whirlpool. Reach limits how far it carries; at 0 it reaches the whole canvas.

▾On death break into smaller particles

When a particle's life runs out it can break into smaller ones — a shell bursting into sparks, a bubble popping. The pieces don't break up again, so it can't run away with your frame rate.

▾Scene trails, links, background

There are two different trails and they are easy to mix up. Motion trails, here, smear the whole picture: every particle leaves a fading streak wherever it went, and Trail fade says how fast that streak clears — turn it up for shorter trails. Comet tail, over in Look, belongs to one particle: it is that particle's own path drawn as a tapering ribbon, so it curves with it and works on any background. Both survive the export.
Motion trails smear the whole picture
Link nearby particles
Background
Click to place the emitter — hold and drag to trail it behind the pointer. Each emitter can sit off that point with its own Offset X/Y Zoom 1.00×
FPS – 0 particles

Couldn't start the engine

This needs WebGL2 and the PixiJS engine from a CDN. Check your connection and reload.

0.00s / 4.0s
Created by Ali Hakan Şen & Dioganos