Open experiment
Confetti success panel
A semantic success state designed to make completion feel rewarding without disrupting the next task. Confetti stays clipped inside the panel, replay is explicit, and reduced-motion users receive a brief static color burst.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<section class="cmp-confetti-success">
<span class="cmp-confetti-success__burst" aria-hidden="true"></span>
<div class="cmp-confetti-success__icon" aria-hidden="true">✓</div>
<span class="cmp-confetti-success__eyebrow">Experiment published</span>
<h2>Your component is live.</h2>
<p>Preview, share, or keep building while the momentum is fresh.</p>
<div class="cmp-confetti-success__actions">
<button type="button">Open preview</button
><button type="button" data-replay aria-label="Replay celebration">Replay ✦</button>
</div>
</section>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- The success heading and message remain semantic text.
- Confetti particles are decorative and bounded.
- Replay is a named button with a reduced-motion fallback.
License: MIT License for open-source use, modification, and distribution.