ReferenceEffectsInterface

SparklesOptions

How many sparkles to emit, and their color, size, speed and lifetime.

extends BaseEffectOptions

Options for sparkles().

Properties

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>defaultgradient(["oklch(0.7 0.15 70)", "oklch(0.95 0.15 70)"]): The colors the sparkles can take on. An array of color strings is converted with color() right away, and a random one is picked for each sparkle. A sampler is evaluated for each sparkle instead. Sparkles aren’t affected by lighting, so their colors appear exactly as given, except while they glint.
countoptionalSampler<number>defaultrange(20, 40): How many sparkles are emitted in total. They’re split into four quick bursts over the first 0.3 seconds, so the sparkles don’t all appear at once. Sampled once, and rounded to the nearest integer.
lifetimeoptionalSampler<number>defaultrange(0.7, 1.4): How long the sparkles live, in seconds. Sampled for each sparkle.
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.
sizeoptionalSampler<number>default24: The size of the largest sparkles, in pixels. Most sparkles are smaller: each one is scaled down by a random factor between 0.2 and 1, with small factors being far more likely, so a few big sparkles stand out among many small ones. Sampled for each sparkle.
startVelocityoptionalSampler<number>defaultrange(250, 480): How fast sparkles burst outwards, in px/s. Drag slows them down quickly, after which they hover and settle. Sampled for each sparkle.