Play/Pause Morph
A copy-paste audio & waveforms component in pure HTML, CSS & vanilla JS. Zero dependencies, framework-agnostic, MIT-licensed.
Audio & WaveformsHTMLJavaScriptCSSany framework
Copy into your project
HTML
<button class="nuda-ppmorph is-playing" aria-label="Pause">
<span class="nuda-ppmorph__l"></span>
<span class="nuda-ppmorph__r"></span>
</button>JavaScript
const btn = document.querySelector('.nuda-ppmorph');
btn.addEventListener('click', () => {
const playing = btn.classList.toggle('is-playing');
btn.setAttribute('aria-label', playing ? 'Pause' : 'Play');
});CSS
.nuda-ppmorph__l,
.nuda-ppmorph__r {
position: absolute;
width: 4px;
height: 14px;
background: #09090b;
border-radius: 1px;
transition:
width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nuda-ppmorph__l { transform: translateX(-5px); }
.nuda-ppmorph__r { transform: translateX(5px); }
/* Paused state: collapse to a play triangle */
.nuda-ppmorph:not(.is-playing) .nuda-ppmorph__l {
width: 0;
height: 0;
border-left: 11px solid #09090b;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
background: transparent;
transform: translateX(0);
}
.nuda-ppmorph:not(.is-playing) .nuda-ppmorph__r {
opacity: 0;
transform: translateX(0);
}How to use Play/Pause Morph
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.