Confetti
Pieces launch on their own angle, rotate as they rise, and fade at the top. Colour and angle come from a custom property per piece.
Usage
Done
Meant for
Examples
On a Button
Pieces launching on their own angle, rotating as they rise and fading at the top. Angle, colour and delay come from a property per piece — the class holds one keyframe for all of them. Every child of the class is a piece, so the confetti gets its own layer in the button's grid cell — tucked behind it with -z-10, so the pieces launch from behind the button instead of crossing its label.
The class is wm wm-confetti — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.