Skip to content
party.js logoparty.js logo

ReferenceCustom effectsInterface

CreateEffectOptions

Everything that defines a custom effect.

Options for createEffect(), with everything that defines a custom effect: where it happens, when particles are emitted, how they start out and how they change.

behaviorsoptionalBehavior[]

How particles change over their lifetime, run in this order on every simulation step. See Behavior.

canvasoptionalHTMLCanvasElement

A canvas to draw onto. If none is provided, party.js draws onto a fullscreen canvas it shares between all effects, and removes it once no effect is using it anymore. If provided, positions are measured from the canvas’ top-left corner: the built-in effects measure their target relative to it, and a custom effect’s origin is given in its coordinates (see measureTarget()).

lightoptionalLive<Vec3>default{ x: 0, y: 0, z: 1 }

The direction that light comes from, in particle space. The vector’s length does not matter. This value is read every frame. The default value points straight from the viewer.

lightingoptionalLightingFn | nulldefaultcreateLighting()

How a particle’s color changes with the angle between its face and the light. See createLighting(). Pass null to disable lighting.

originLive<Vec2>

The point particle positions are measured from. Read again on every frame, so a function can make the whole effect follow something or, for example, react to the window size. Without a canvas, party.js draws onto its own fullscreen canvas, and the origin is in page coordinates, i.e. pixels from the top-left of the document, with +y pointing down. With a canvas, it’s in that canvas’ coordinate system instead, i.e. pixels from its top-left corner. To start the effect at an element, use measureTarget(), which also handles the conversion to a canvas’ coordinates.

particleInitParticleInit

How new particles start out.

reducedMotionoptionalReducedMotion

What the effect does when the user has asked their system for reduced motion. A skipped effect draws nothing, and the finished promise on the effect handle resolves as “completed” after createEffect() returns, unless you stop the effect immediately. See ReducedMotion for more information. Without this option, the default set with setDefaultReducedMotion() is used, which is "skip" unless you changed it.

rngoptionalRng

A random number generator to use instead of the built-in one. This takes precedence over seed.

scheduleEmissionSchedule

When and how many particles are emitted.

seedoptionalnumber

A seed for the effect’s random number generator. The same seed with the same options produces the same visuals each time. Without one, a random seed is generated and every run of the effect looks different.