Open experiment
Quantum ripple button
Launches one action through concentric interference rings that originate at the activation point. Pointer or keyboard activation sends bounded rings across the face and confirms completion. Its origin-aware interference field differs from linear charge, fire, water, and magnetic actions.
Lab tested Responsive Dark mode Interactive
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<section class="cmp-quantum-ripple-button cmp-atlas" data-state="idle" data-variant="0">
<div class="cmp-atlas__eyebrow"><span>Quantum interference</span><i aria-hidden="true"></i></div>
<button
class="cmp-atlas__action"
type="button"
data-primary
data-active-label="Effect complete"
aria-pressed="false"
>
<span class="cmp-atlas__fx" aria-hidden="true"><i></i><i></i><i></i><b>Q</b></span>
<span><strong>Quantum ripple</strong><small>Quantum / ripple</small></span>
<em aria-hidden="true">-></em>
</button>
<div class="cmp-atlas__meter" aria-hidden="true"><i></i></div>
<p data-status aria-live="polite">Ready for keyboard or pointer activation</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.