Open experiment
Particle empty state
Turns an empty collection into an inviting generative field that previews what adding data creates. The primary action seeds sample particles and replaces the empty copy with a success summary. Transforms in place from emptiness to sample content rather than remaining a static illustration.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<section class="cmp-particle-empty-state cmp-atlas" data-state="idle" data-variant="5">
<div class="cmp-atlas__feedback-scene" aria-hidden="true"><i></i><i></i><i></i><b>36</b></div>
<div class="cmp-atlas__feedback-copy">
<span>Empty states</span>
<h3>Particle empty state</h3>
<p>
Turns an empty collection into an inviting generative field that previews what adding data
creates.
</p>
</div>
<div class="cmp-atlas__choices">
<button type="button" data-choice="0" aria-pressed="true">Inspect</button
><button type="button" data-choice="1" aria-pressed="false">Resolve</button
><button type="button" data-choice="2" aria-pressed="false">Archive</button>
</div>
<div class="cmp-atlas__feedback-actions">
<button
type="button"
class="cmp-atlas__primary"
data-primary
data-active-label="State updated"
aria-pressed="false"
>
Run interaction</button
><button type="button" data-choice="3" aria-pressed="false">Details</button>
</div>
<p data-status aria-live="polite">Ready · Escape resets the demo</p>
</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
- Every interactive target is a labelled native control with a visible focus treatment.
- State changes are communicated through a polite text status and never by color alone.
- The contained visual effects stop when the user requests reduced motion.
License: MIT License for open-source use, modification, and distribution.