Typography & motion
Confetti
Three intensities (subtle, normal, wild). Fires once on a key change, no persistent canvas, easy retrigger via key counter.
Confetti is the celebration moment. One-shot canvas burst at three intensities — subtle for a small win, normal for a goal hit, wild for completion of a streak. The component re-fires on every key change, so the standard pattern is to bump a counter.
Example
tsx
import { Confetti } from '@kidcash/ui';
const [counter, setCounter] = useState(0);
<button onClick={() => setCounter(c => c + 1)}>Hit goal</button>
<Confetti key={counter} intensity="normal" />Try it live
← Back to the playground to see Confetti rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.