Interface Options

interface Options {
    angle?: number;
    colors?: string[];
    decay?: number;
    disableForReducedMotion?: boolean;
    drift?: number;
    gravity?: number;
    origin?: Origin;
    particleCount?: number;
    scalar?: number;
    shapes?: Shape[];
    spread?: number;
    startVelocity?: number;
    ticks?: number;
    zIndex?: number;
}

Properties

angle? colors? decay? disableForReducedMotion? drift? gravity? origin? particleCount? scalar? shapes? spread? startVelocity? ticks? zIndex?

Properties

Optional angle

angle?: number

The angle in which to launch the confetti, in degrees. 90 is straight up.

Default

90

Optional colors

colors?: string[]

An array of color strings, in the HEX format... you know, like #bada55.

Optional decay

decay?: number

How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise the confetti will gain speed. Better yet, just never change it.

Default

0.9

Optional disableForReducedMotion

disableForReducedMotion?: boolean

Disables confetti entirely for users that prefer reduced motion. The confetti() promise will resolve immediately in this case.

Default

false

Optional drift

drift?: number

How much to the side the confetti will drift. The default is 0, meaning that they will fall straight down. Use a negative number for left and positive number for right

Default

0

Optional gravity

gravity?: number

How quickly the particles are pulled down. 1 is full gravity, 0.5 is half gravity, etc., but there are no limits.

Default

1

Optional origin

origin?: Origin

Where to start firing confetti from. Feel free to launch off-screen if you'd like.

Optional particleCount

particleCount?: number

The number of confetti to launch. More is always fun... but be cool, there's a lot of math involved.

Default

50

Optional scalar

scalar?: number

Scale factor for each confetti particle. Use decimals to make the confetti smaller.

Default

1

Optional shapes

shapes?: Shape[]

The possible values are square, circle, and star. The default is to use both squares and circles in an even mix.

Default

['square','circle']

Optional spread

spread?: number

How far off center the confetti can go, in degrees. 45 means the confetti will launch at the defined angle plus or minus 22.5 degrees.

Default

45

Optional startVelocity

startVelocity?: number

How fast the confetti will start going, in pixels.

Default

45

Optional ticks

ticks?: number

How many times the confetti will move. This is abstract... but play with it if the confetti disappear too quickly for you.

Default

200

Optional zIndex

zIndex?: number

The confetti should be on top, after all. But if you have a crazy high page, you can set it even higher.

Default

100

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc