Amplitude Rings
A copy-paste audio & waveforms component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Audio & WaveformsHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-arings">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round">
<path d="M11 5L6 9H2v6h4l5 4V5z" />
<path class="nuda-arings__l1" d="M15.54 8.46a5 5 0 010 7.07" />
<path class="nuda-arings__l2" d="M19.07 4.93a10 10 0 010 14.14" />
</svg>
</div>CSS
.nuda-arings {
display: inline-flex;
color: #e4ff54;
padding: 8px;
background: rgba(228,255,84,.06);
border-radius: 10px;
}
.nuda-arings svg {
width: 28px;
height: 28px;
}
.nuda-arings__l1,.nuda-arings__l2 {
transform-origin: 11px 12px;
animation: _arPulse 1.4s ease-in-out infinite;
}
.nuda-arings__l2 {
animation-delay: .2s;
}
@keyframes _arPulse {
0%,100% {
opacity: .3;
transform: scale(.92);
}
50% {
opacity: 1;
transform: scale(1.08);
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-arings__l1,.nuda-arings__l2 {
animation: none;
}
}
How to use Amplitude Rings
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.