Dynamic Island

<!-- Dynamic Island · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="isl-root"><div class="isl" data-state="idle"><div class="isl-idle">&#127925; <span>Now playing</span></div><div class="isl-exp"><span class="isl-art">&#127911;</span><div class="isl-meta"><b>Midnight Drive</b><small>Neon Waves</small></div><span class="isl-eq"><i></i><i></i><i></i><i></i></span></div></div></div>
</div>

/* Dynamic Island · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.isl-root{position:absolute;inset:0;background:#0a0a10;display:flex;align-items:center;justify-content:center}
.isl{background:#000;color:#fff;border-radius:28px;overflow:hidden;display:flex;align-items:center;justify-content:center;width:140px;height:34px;padding:0 14px;transition:width .5s cubic-bezier(.34,1.56,.64,1),height .5s cubic-bezier(.34,1.56,.64,1),border-radius .5s;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.isl[data-state="expanded"]{width:240px;height:64px;border-radius:24px}
.isl-idle{display:flex;align-items:center;gap:8px;font:600 13px 'Switzer',sans-serif;white-space:nowrap}
.isl-exp{display:none;align-items:center;gap:12px;width:100%}
.isl[data-state="expanded"] .isl-idle{display:none}.isl[data-state="expanded"] .isl-exp{display:flex}
.isl-art{font-size:26px}.isl-meta b{display:block;font:600 13px 'Switzer',sans-serif}.isl-meta small{color:#9b9ba8;font:11px 'Switzer',sans-serif}
.isl-eq{margin-left:auto;display:flex;gap:2px;align-items:flex-end;height:18px}.isl-eq i{width:3px;background:#F5480F;border-radius:2px;animation:isl-eq .9s ease-in-out infinite}
.isl-eq i:nth-child(2){animation-delay:.2s}.isl-eq i:nth-child(3){animation-delay:.4s}.isl-eq i:nth-child(4){animation-delay:.1s}
@keyframes isl-eq{0%,100%{height:5px}50%{height:16px}}

// Dynamic Island · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var isl=root.querySelector('.isl');var exp=false;setInterval(function(){exp=!exp;isl.dataset.state=exp?'expanded':'idle';},2600);
}
init(document.querySelector('.jouw-container'));