소닉 브랜딩

<div class="wrap">
  <div class="devices">
    <div class="dev" id="d1"><svg viewBox="0 0 24 24"><rect x="6" y="2" width="12" height="20" rx="2" fill="none" stroke="var(--fg)" stroke-width="1.4"/></svg></div>
    <div class="dev" id="d2"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="12" rx="1" fill="none" stroke="var(--fg)" stroke-width="1.4"/><line x1="8" y1="20" x2="16" y2="20" stroke="var(--fg)" stroke-width="1.4"/></svg></div>
    <div class="dev" id="d3"><svg viewBox="0 0 24 24"><rect x="7" y="5" width="10" height="14" rx="3" fill="none" stroke="var(--fg)" stroke-width="1.4"/></svg></div>
  </div>
  <svg class="sig" viewBox="0 0 100 20" preserveAspectRatio="none"><polyline points="0,10 12,10 18,3 24,17 30,10 42,10 48,4 54,16 60,10 100,10" fill="none" stroke="var(--accent)" stroke-width="1.6"/></svg>
  <button class="play" id="play" type="button" aria-label="play sound"><span class="tri"></span></button>
</div>

.wrap{position:relative;width:92%;height:86%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%}
.devices{display:flex;gap:6%}
.dev{width:clamp(34px,20vmin,78px);aspect-ratio:1;border-radius:14%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center}
.dev svg{width:60%;height:60%}
.dev.go{animation:beat .5s ease-out}
@keyframes beat{0%{transform:scale(1)}30%{transform:scale(1.14)}100%{transform:scale(1)}}
.sig{width:60%;height:clamp(16px,8vmin,34px);opacity:.85}
.play{position:absolute;right:0;bottom:0;width:clamp(28px,15%,40px);aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.play .tri{width:0;height:0;border-style:solid;border-width:6px 0 6px 9px;border-color:transparent transparent transparent var(--fg);margin-left:2px}
.play:active{transform:scale(.92)}

const devs = [document.getElementById('d1'), document.getElementById('d2'), document.getElementById('d3')];
function beatVisual() {
  devs.forEach((d, i) => setTimeout(() => { d.classList.remove('go'); void d.offsetWidth; d.classList.add('go'); }, i * 90));
}
setInterval(beatVisual, 2600);
document.getElementById('play').addEventListener('click', () => {
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const freqs = [440, 554.37, 659.25, 880];
  const now = ctx.currentTime;
  freqs.forEach((f, i) => {
    const t = now + i * 0.11;
    const last = i === freqs.length - 1;
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    osc.type = last ? 'triangle' : 'sine';
    osc.frequency.value = f;
    gain.gain.setValueAtTime(0, t);
    gain.gain.linearRampToValueAtTime(0.12, t + 0.01);
    gain.gain.exponentialRampToValueAtTime(0.0001, t + (last ? 0.3 : 0.13));
    osc.connect(gain).connect(ctx.destination);
    osc.start(t);
    osc.stop(t + 0.35);
    setTimeout(() => devs.forEach((d) => { d.classList.remove('go'); void d.offsetWidth; d.classList.add('go'); }), i * 110);
  });
  setTimeout(() => ctx.close(), 700);
});