Spectrum Analyzer
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-spec">
<!-- Repeat 20 spans with staggered animation-delay values -->
<span style="animation-delay: 0s"></span>
<span style="animation-delay: 0.08s"></span>
<!-- ... -->
</div>CSS
.nuda-spec span {
width: 3px;
background: linear-gradient(180deg, #ff6dd4, #9d6dff, #62b6ff);
border-radius: 1px;
animation: nuda-spec-bar 1.4s ease-in-out infinite;
}
.nuda-spec span:nth-child(odd) { animation-duration: 1.1s; }
.nuda-spec span:nth-child(3n) { animation-duration: 1.7s; }
@keyframes nuda-spec-bar {
0%, 100% { height: 5px; }
50% { height: 32px; }
}How to use Spectrum Analyzer
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.