Celebration Cursor

Tumbling paper confetti that spills from the cursor and bursts on click

celebration-cursor-tw

Customize

First Colour

Second Colour

Third Colour

Size

14.0px

Size Variance

0.40

Aspect

0.55

Density

1.0

Spread

1.00

Inherit

0.25

Gravity

1.00

Drag

1.00

Flutter

1.00

Spin

1.00

Wind

0.0

Turbulence

0.50

Life

6.00s

Fade

0.25

Shading

0.50

Sheen

0.35

Opacity

1.00

Burst Count

120

Burst Power

1.00

Burst Spread

70°

Autoplay Speed

1.00

Idle Delay

1.50s

SettleBurstAutoplayIntroInteractiveDisabled

Props

Name	Type	Default	Description
`colors`	string[]	`["#5227FF", "#FF9FFC", "#B19EEF"]`	Paper colours. Each piece picks one at random. Accepts any CSS colour, including currentColor.
`shapes`	("rect" \| "square" \| "strip" \| "circle" \| "triangle")[]	`["rect", "strip", "circle"]`	Shapes to cut the confetti in. Each piece picks one at random.
`size`	number	`14`	Length of a piece in pixels. Squares, strips and circles are proportioned from it.
`sizeVariance`	number	`0.4`	Random variation in piece size, from 0 (all the same) to 1.
`aspect`	number	`0.55`	Width of a rectangle relative to its length.
`density`	number	`1`	Pieces spilled per distance the pointer travels. 0 turns the trail off and keeps only bursts.
`spread`	number	`1`	How hard trail pieces are tossed when they leave the pointer.
`inherit`	number	`0.25`	How much of the pointer's speed trail pieces carry with them.
`gravity`	number	`1`	Strength of gravity. Negative values make the confetti rise.
`drag`	number	`1`	Air resistance. Each piece feels more of it when it falls flat than when it falls edge first.
`flutter`	number	`1`	How strongly tilted pieces glide sideways as they fall, which makes them swing and flutter.
`spin`	number	`1`	How fast the pieces tumble.
`wind`	number	`0`	A steady sideways breeze, in steps of 60px per second. Negative values blow to the left.
`turbulence`	number	`0.5`	Gentle gusts that drift the confetti around as it falls.
`life`	number	`6`	Seconds a piece lasts before it has faded away.
`fade`	number	`0.25`	Share of a piece's life spent fading out at the end.
`shading`	number	`0.5`	How much darker a piece looks as it turns edge-on, from 0 (flat colour) to 1.
`sheen`	number	`0.35`	Soft light that catches a piece as it turns toward the light, from 0 to 1.
`opacity`	number	`1`	Overall opacity of the confetti, from 0 to 1.
`settle`	boolean	`false`	Let pieces land on the bottom edge and rest for a moment before they fade, instead of falling out of view.
`burst`	boolean	`true`	Click or tap to fire a burst of confetti that shoots up and flutters down.
`burstCount`	number	`120`	Pieces in one burst. The intro cannons fire a little less than this each.
`burstPower`	number	`1`	How high and far a burst throws the confetti.
`burstSpread`	number	`70`	Width of a burst's cone in degrees.
`maxPieces`	number	`1800`	Upper limit on pieces in flight. The oldest give way first.
`autoplay`	boolean	`false`	Spill confetti along flowing curves on its own while the pointer is away, with the odd burst. The pointer takes over the moment it enters.
`autoplaySpeed`	number	`1`	Speed multiplier for autoplay.
`idleDelay`	number	`1.5`	Seconds after the pointer leaves before autoplay resumes.
`intro`	boolean	`true`	Fire two cannons from the bottom corners the first time the component scrolls into view.
`interactive`	boolean	`true`	Follow the visitor's pointer. Turn it off to show only autoplay, the intro and scripted bursts.
`disabled`	boolean	`false`	Stop spilling confetti and ignore input. Pieces already in the air fall and fade.
`ref`	{ burst, cannons, clear }	`—`	burst(x?, y?, angle?) fires a burst at a point in pixels, aimed at an angle in degrees (-90 is straight up). cannons() fires the intro cannons again. clear() removes every piece.
`children`	ReactNode	`—`	Content the confetti falls over.
`className`	string	`—`	Classes for the root element. It fills its parent and is at least 240px tall.
`style`	CSSProperties	`—`	Inline styles for the root element.

colorsstring[]

Paper colours. Each piece picks one at random. Accepts any CSS colour, including currentColor.

Default["#5227FF", "#FF9FFC", "#B19EEF"]

shapes("rect" | "square" | "strip" | "circle" | "triangle")[]

Shapes to cut the confetti in. Each piece picks one at random.

Default["rect", "strip", "circle"]

sizenumber

Length of a piece in pixels. Squares, strips and circles are proportioned from it.

Default14

sizeVariancenumber

Random variation in piece size, from 0 (all the same) to 1.

Default0.4

aspectnumber

Width of a rectangle relative to its length.

Default0.55

densitynumber

Pieces spilled per distance the pointer travels. 0 turns the trail off and keeps only bursts.

Default1

spreadnumber

How hard trail pieces are tossed when they leave the pointer.

Default1

inheritnumber

How much of the pointer's speed trail pieces carry with them.

Default0.25

gravitynumber

Strength of gravity. Negative values make the confetti rise.

Default1

dragnumber

Air resistance. Each piece feels more of it when it falls flat than when it falls edge first.

Default1

flutternumber

How strongly tilted pieces glide sideways as they fall, which makes them swing and flutter.

Default1

spinnumber

How fast the pieces tumble.

Default1

windnumber

A steady sideways breeze, in steps of 60px per second. Negative values blow to the left.

Default0

turbulencenumber

Gentle gusts that drift the confetti around as it falls.

Default0.5

lifenumber

Seconds a piece lasts before it has faded away.

Default6

fadenumber

Share of a piece's life spent fading out at the end.

Default0.25

shadingnumber

How much darker a piece looks as it turns edge-on, from 0 (flat colour) to 1.

Default0.5

sheennumber

Soft light that catches a piece as it turns toward the light, from 0 to 1.

Default0.35

opacitynumber

Overall opacity of the confetti, from 0 to 1.

Default1

settleboolean

Let pieces land on the bottom edge and rest for a moment before they fade, instead of falling out of view.

Defaultfalse

burstboolean

Click or tap to fire a burst of confetti that shoots up and flutters down.

Defaulttrue

burstCountnumber

Pieces in one burst. The intro cannons fire a little less than this each.

Default120

burstPowernumber

How high and far a burst throws the confetti.

Default1

burstSpreadnumber

Width of a burst's cone in degrees.

Default70

maxPiecesnumber

Upper limit on pieces in flight. The oldest give way first.

Default1800

autoplayboolean

Spill confetti along flowing curves on its own while the pointer is away, with the odd burst. The pointer takes over the moment it enters.

Defaultfalse

autoplaySpeednumber

Speed multiplier for autoplay.

Default1

idleDelaynumber

Seconds after the pointer leaves before autoplay resumes.

Default1.5

introboolean

Fire two cannons from the bottom corners the first time the component scrolls into view.

Defaulttrue

interactiveboolean

Follow the visitor's pointer. Turn it off to show only autoplay, the intro and scripted bursts.

Defaulttrue

disabledboolean

Stop spilling confetti and ignore input. Pieces already in the air fall and fade.

Defaultfalse

ref{ burst, cannons, clear }

burst(x?, y?, angle?) fires a burst at a point in pixels, aimed at an angle in degrees (-90 is straight up). cannons() fires the intro cannons again. clear() removes every piece.

Default—

childrenReactNode

Content the confetti falls over.

Default—

classNamestring

Classes for the root element. It fills its parent and is at least 240px tall.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

colors

string[]

["#5227FF", "#FF9FFC", "#B19EEF"]

Paper colours. Each piece picks one at random. Accepts any CSS colour, including currentColor.

shapes

("rect" | "square" | "strip" | "circle" | "triangle")[]

["rect", "strip", "circle"]

Shapes to cut the confetti in. Each piece picks one at random.

size

number

14

Length of a piece in pixels. Squares, strips and circles are proportioned from it.

sizeVariance

number

0.4

Random variation in piece size, from 0 (all the same) to 1.

aspect

number

0.55

Width of a rectangle relative to its length.

density

number

1

Pieces spilled per distance the pointer travels. 0 turns the trail off and keeps only bursts.

spread

number

1

How hard trail pieces are tossed when they leave the pointer.

inherit

number

0.25

How much of the pointer's speed trail pieces carry with them.

gravity

number

1

Strength of gravity. Negative values make the confetti rise.

drag

number

1

Air resistance. Each piece feels more of it when it falls flat than when it falls edge first.

flutter

number

1

How strongly tilted pieces glide sideways as they fall, which makes them swing and flutter.

spin

number

1

How fast the pieces tumble.

wind

number

0

A steady sideways breeze, in steps of 60px per second. Negative values blow to the left.

turbulence

number

0.5

Gentle gusts that drift the confetti around as it falls.

life

number

6

Seconds a piece lasts before it has faded away.

fade

number

0.25

Share of a piece's life spent fading out at the end.

shading

number

0.5

How much darker a piece looks as it turns edge-on, from 0 (flat colour) to 1.

sheen

number

0.35

Soft light that catches a piece as it turns toward the light, from 0 to 1.

opacity

number

1

Overall opacity of the confetti, from 0 to 1.

settle

boolean

false

Let pieces land on the bottom edge and rest for a moment before they fade, instead of falling out of view.

burst

boolean

true

Click or tap to fire a burst of confetti that shoots up and flutters down.

burstCount

number

120

Pieces in one burst. The intro cannons fire a little less than this each.

burstPower

number

1

How high and far a burst throws the confetti.

burstSpread

number

70

Width of a burst's cone in degrees.

maxPieces

number

1800

Upper limit on pieces in flight. The oldest give way first.

autoplay

boolean

false

Spill confetti along flowing curves on its own while the pointer is away, with the odd burst. The pointer takes over the moment it enters.

autoplaySpeed

number

1

Speed multiplier for autoplay.

idleDelay

number

1.5

Seconds after the pointer leaves before autoplay resumes.

intro

boolean

true

Fire two cannons from the bottom corners the first time the component scrolls into view.

interactive

boolean

true

Follow the visitor's pointer. Turn it off to show only autoplay, the intro and scripted bursts.

disabled

boolean

false

Stop spilling confetti and ignore input. Pieces already in the air fall and fade.

ref

{ burst, cannons, clear }

—

burst(x?, y?, angle?) fires a burst at a point in pixels, aimed at an angle in degrees (-90 is straight up). cannons() fires the intro cannons again. clear() removes every piece.

children

ReactNode

—

Content the confetti falls over.

className

string

—

Classes for the root element. It fills its parent and is at least 240px tall.

style

CSSProperties

—

Inline styles for the root element.