Confetti
Gold confetti that pops off a button, tumbles back down and settles on top of it. Each flake catches the light as it turns.
Press it a few times.
Markup
<span class="ob-confetti">
<canvas class="ob-confetti-canvas" aria-hidden="true"></canvas>
<a class="ob-button" href="mailto:…">Email me</a>
</span>Behaviour
import { mountConfetti } from "obvious/behaviours";
const stop = mountConfetti(el); // bursts on every click of the button insideNotes
The golds are the same as Gradient text's. It needs room above the button to rise into, which the canvas takes without moving anything. Under reduced motion it doesn't play.
CSS
@import "obvious/css/components/confetti.css";Knobs
Set any of these on the component, or an ancestor, to change it.
| Property | Default |
|---|---|
--ob-confetti-count | 90 |
--ob-confetti-room | 220px |
--ob-confetti-side | 140px |
--ob-confetti-gravity | 1500 |
--ob-confetti-hold | 1800ms |
--ob-confetti-fade | 700ms |
--ob-confetti-dark | var(--ob-gold-dark) |
--ob-confetti-mid | var(--ob-gold) |
--ob-confetti-light | var(--ob-gold-light) |