ConfettiOptions

extends BaseEffectOptions

Options for confetti().

Properties

angleoptionalSampler<number>default90

The angle at which the confetti is emitted, measured counter-clockwise from +x in degrees in particle space, so 0 points right and 90 points up. Sampled once when the effect starts, so all confetti shares the value.

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()).

colorsoptionalstring[] | Sampler<string | Color>defaultrandomHue({ l: 0.65, c: 0.15 })

The colors that the confetti can take on. If an array of color strings is given, they are converted to Color objects via color(), and a random one will be picked for each confetti. Otherwise, the sampler is evaluated for each piece of confetti.

countoptionalSampler<number>defaultrange(15, 30)

How many pieces of confetti are emitted simultaneously at the start of the effect. Sampled once and rounded to the nearest integer.

dragoptionalSampler<number>defaultrange(130, 220)

The speed at which falling confetti stops accelerating, in px/s, where drag balances gravity. Lower values make confetti drift down more slowly, and also keep it from flying as far. Unlike the drag() behavior, this is a speed, not a rate. Sampled for each piece of confetti, so a range lets the cloud spread out as it falls.

gravityoptionalSampler<number>default800

The strength of gravity affecting the confetti, in px/s². Sampled once when the effect starts, so all confetti shares the value.

lifetimeoptionalSampler<number>defaultrange(2, 4)

The lifetime of the confetti, in seconds. Sampled for each piece of confetti.

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.

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.

shapesoptionalSampler<ParticleShape> | ParticleShape[]default[{ type: "circle" }, { type: "square", cornerRadius: 0.2 }, { type: "square", aspectRatio: 0.2, cornerRadius: 0.05 }]

The shapes that the confetti can take on. If any array of shapes is given, a random one will be picked for each confetti. Otherwise, the sampler is evaluated for each piece of confetti.

sizeoptionalSampler<number>defaultrange(6, 16)

The initial size of the confetti, in pixels. Sampled for each piece of confetti.

spreadoptionalSampler<number>default50

How much a confetti’s emission angle may differ from angle, in degrees, in either direction. Most confetti flies close to angle, and becomes rarer and slower towards the edges of the cone, so the burst shoots out as a jet rather than spraying evenly. Sampled once when the effect starts, so all confetti shares the value.

startVelocityoptionalSampler<number>defaultrange(800, 1500)

How fast confetti starts out, in px/s. Its direction comes from angle and spread, and confetti towards the edges of the cone starts out up to 45% slower. Drag slows the confetti down quickly, so it travels roughly startVelocity * drag / gravity pixels before it starts to fall. Sampled for each piece of confetti.