02Radial spectrum

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <defs>
    <symbol id="ico-waveform" viewBox="0 0 256 256" fill="currentColor"><path d="M208 96v64H48V96Z" opacity=".2"/><path d="M56 96v64a8 8 0 0 1-16 0V96a8 8 0 0 1 16 0m32-72a8 8 0 0 0-8 8v192a8 8 0 0 0 16 0V32a8 8 0 0 0-8-8m40 32a8 8 0 0 0-8 8v128a8 8 0 0 0 16 0V64a8 8 0 0 0-8-8m40 32a8 8 0 0 0-8 8v64a8 8 0 0 0 16 0V96a8 8 0 0 0-8-8m40-16a8 8 0 0 0-8 8v96a8 8 0 0 0 16 0V72a8 8 0 0 0-8-8"/></symbol>
    <symbol id="ico-play" viewBox="0 0 256 256" fill="currentColor"><path d="M228.23 134.69L84.15 222.81A8 8 0 0 1 72 216.12V39.88a8 8 0 0 1 12.15-6.69l144.08 88.12a7.82 7.82 0 0 1 0 13.38" opacity=".2"/><path d="M232.4 114.49L88.32 26.35a16 16 0 0 0-16.2-.3A15.86 15.86 0 0 0 64 39.87v176.26A15.94 15.94 0 0 0 80 232a16.07 16.07 0 0 0 8.36-2.35l144.04-88.14a15.88 15.88 0 0 0 0-27.02M80 215.94V40l143.83 88Z"/></symbol>
    <symbol id="ico-pause" viewBox="0 0 256 256" fill="currentColor"><path d="M208 48v160a8 8 0 0 1-8 8h-40a8 8 0 0 1-8-8V48a8 8 0 0 1 8-8h40a8 8 0 0 1 8 8M96 40H56a8 8 0 0 0-8 8v160a8 8 0 0 0 8 8h40a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8" opacity=".2"/><path d="M200 32h-40a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h40a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m0 176h-40V48h40zM96 32H56a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h40a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m0 176H56V48h40z"/></symbol>
  </defs>
</svg>
<main class="stage">
<div class="rs is-demo" id="rs">
  <p class="rs__hint"><svg class="rs__ico" aria-hidden="true"><use href="#ico-waveform"/></svg><span>Press play and it moves with real sound</span></p>
  <div class="rs__dial" aria-hidden="true">
    <div class="rs__bars" id="bars"></div>
    <div class="rs__hub"><svg class="rs__hubIco" aria-hidden="true"><use href="#ico-waveform"/></svg></div>
  </div>
  <div class="rs__foot">
    <button class="rs__play" id="play" type="button" aria-pressed="false">
      <svg class="rs__ico rs__ico--play" aria-hidden="true"><use href="#ico-play"/></svg>
      <svg class="rs__ico rs__ico--pause" aria-hidden="true"><use href="#ico-pause"/></svg>
      <span id="playLabel">Play</span>
    </button>
    <p class="rs__level">
      <span class="rs__levelLabel">Loudest band</span>
      <b class="rs__levelBox">
        <span class="rs__levelText" id="levelText" aria-live="polite">Bass</span>
        <span class="rs__loop" aria-hidden="true"><i>Bass</i><i>Mid</i><i>Treble</i></span>
      </b>
    </p>
  </div>
</div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 원형 스펙트럼 — 막대 48개를 원 둘레에 세운다. 각도는 --i * 1turn / 48.
// 막대의 transform-origin 은 그 막대의 아래 끝(원의 중심점)이다 — rotate 의 회전축이 원 중심이 되고,
// scaleY 는 막대가 원에 닿은 지점에서 바깥으로만 자란다. 규칙 8 의 "붙는 지점" 정당 사례.
// 격자 미리보기(.is-demo)는 사전 시퀀스를 CSS 키프레임으로 재생하고, 재생을 누르면 진짜 Web Audio 값이 온다.

$duration: $dur-quick;
$easing: $ease-spring;
$color: $subject-mint;

@include stage($stage-ink);

.rs { display: flex; flex-direction: column; align-items: center; gap: $sp-2; width: 100%; }
.rs__hint {
  display: flex; align-items: center; gap: $sp-1; margin: 0;
  font-weight: 700; font-size: clamp(11px, 3vw, 12px); color: $subject-cream;
}
.rs__ico { width: 16px; height: 16px; color: $color; }

.rs__dial { position: relative; width: 156px; height: 156px; }
// 막대는 왼쪽·아래 50% 에 걸어 아래 끝이 원의 중심에 닿게 한다. 원점은 그 닿은 점(50% 100%).
.rs__bars { position: absolute; inset: 0; }
.rs__bar {
  position: absolute; left: 50%; bottom: 50%; width: 4px; height: 24px; margin-left: -2px;
  border-radius: $r-xs;
  background: linear-gradient(180deg, $stage-yellow 0%, $color 100%);
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(var(--h, .12));
  transition: transform $duration $ease-out;
}
.rs__hub {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px;
  display: grid; place-items: center; border-radius: 50%;
  background: #211d26; border: 4px solid rgba($subject-cream, .14);
}
.rs__hubIco { width: 24px; height: 24px; color: $color; }

.rs__foot { display: flex; align-items: center; justify-content: center; gap: $sp-4; width: 100%; }
.rs__play {
  display: inline-flex; align-items: center; gap: $sp-1;
  border: 0; border-radius: $r-pill; padding: $sp-2 $sp-4;
  background: $stage-yellow; color: $subject-ink; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: clamp(11px, 3vw, 12px); line-height: 1;
}
.rs__ico--pause { display: none; }
.rs__play[aria-pressed="true"] .rs__ico--play { display: none; }
.rs__play[aria-pressed="true"] .rs__ico--pause { display: inline-block; }
.rs__play .rs__ico { color: $subject-ink; }

.rs__level { margin: 0; display: flex; align-items: center; gap: $sp-2; }
.rs__levelLabel { font-weight: 700; font-size: clamp(10px, 2.6vw, 11px); color: rgba($subject-cream, .82); }
.rs__levelBox {
  position: relative; display: grid; place-items: center;
  min-width: 40px; height: 20px; border-radius: $r-xs; padding: 0 $sp-1;
  background: rgba($subject-cream, .16); color: $subject-cream;
  font-weight: 800; font-size: clamp(11px, 3vw, 12px); line-height: 1;
}
.rs__loop { position: absolute; inset: 0; display: grid; place-items: center; visibility: hidden; }
.rs__loop i { grid-area: 1 / 1; font-style: normal; visibility: hidden; }

// ── 격자 미리보기 루프 ─────────────────────────────────────────────
// 01 과 같은 파도 시퀀스를 원에 얹는다. 음수 지연으로 등분 번호만큼 위상을 민다(양수는 창 끝에서 순간이동).
// 회전(rot) 은 넣지 않는다 — 파도가 도는 것과 나는 것이 겹치면 무엇을 보여주는지 알 수 없다(한 데모 한 동작).
// 봉우리는 2초에 세 번(1.5Hz)이라 WCAG 2.3.1 의 초당 3회 한계 아래다.
.rs.is-demo .rs__bar {
  animation-name: rsWave; animation-duration: $dur-loop; animation-timing-function: $easing;
  animation-iteration-count: infinite; animation-fill-mode: backwards;
  animation-delay: calc(var(--i) * -41ms);
  transition: none;
}
@keyframes rsWave {
  0%   { transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(.12); }
  14%  { transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(.94); }
  28%  { transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(.34); }
  42%  { transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(.70); }
  56%  { transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(.20); }
  70%  { transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(.82); }
  84%  { transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(.28); }
  100% { transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(.12); }
}
// 대역 이름도 같은 박자로 바뀐다. 글자 교체는 steps(1, end) 컷 — 지연 구간에 fill-mode 를 두지 않는다
// (작성 상태가 이미 숨김이라 backwards 를 주면 세 글자가 겹쳐 보인다, 01 실측).
.rs.is-demo .rs__levelText { color: transparent; }
.rs.is-demo .rs__loop { visibility: visible; }
.rs.is-demo .rs__loop i {
  animation-name: rsBandName; animation-duration: $dur-loop; animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
.rs.is-demo .rs__loop i:nth-child(1) { animation-delay: 0ms; }
.rs.is-demo .rs__loop i:nth-child(2) { animation-delay: 666ms; }
.rs.is-demo .rs__loop i:nth-child(3) { animation-delay: 1332ms; }
@keyframes rsBandName {
  0%, 33% { visibility: visible; }
  34%, 100% { visibility: hidden; }
}

@media (max-width: 340px) {
  .rs { gap: 0; }
  .rs__dial { width: 120px; height: 120px; }
  .rs__bar { height: 18px; width: 4px; }
  .rs__hub { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  // 좁은 화면에서 막대의 바깥 반경이 무대를 넘기지 않게 반지름도 함께 줄인다 (translateY 와 세트)
  .rs__bar { transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-38px) scaleY(var(--h, .12)); }
  .rs.is-demo .rs__bar { animation: none !important; transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-38px) scaleY(calc(.3 + var(--i) * .01)); }
  .rs__foot { gap: $sp-2; }
  .rs__play { padding: $sp-1 $sp-3; }
}

// reduce 에서는 루프를 멈추되 빈 고리로 두지 않는다 — 등분 번호로 언덕 모양 스펙트럼 한 바퀴를 세워 둔다
@media (prefers-reduced-motion: reduce) {
  .rs.is-demo .rs__bar,
  .rs.is-demo .rs__loop i { animation: none !important; }
  .rs.is-demo .rs__bar { transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(calc(.22 + sin(var(--i) / 48 * 3.14159) * .6)) !important; }
  .rs.is-demo .rs__levelText { color: $subject-cream !important; }
  .rs.is-demo .rs__loop { visibility: hidden !important; }
  .rs__bar { transition: none !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.rs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.rs__hint {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-weight: 700;
  font-size: clamp(11px, 3vw, 12px);
  color: #fff7e6;
}

.rs__ico {
  width: 16px;
  height: 16px;
  color: #4cd4a6;
}

.rs__dial {
  position: relative;
  width: 156px;
  height: 156px;
}

.rs__bars {
  position: absolute;
  inset: 0;
}

.rs__bar {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 4px;
  height: 24px;
  margin-left: -2px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffd23f 0%, #4cd4a6 100%);
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(var(--h, 0.12));
  transition: transform 220ms ease-out;
}

.rs__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #211d26;
  border: 4px solid rgba(255, 247, 230, 0.14);
}

.rs__hubIco {
  width: 24px;
  height: 24px;
  color: #4cd4a6;
}

.rs__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.rs__play {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  background: #ffd23f;
  color: #17141a;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(11px, 3vw, 12px);
  line-height: 1;
}

.rs__ico--pause {
  display: none;
}

.rs__play[aria-pressed=true] .rs__ico--play {
  display: none;
}

.rs__play[aria-pressed=true] .rs__ico--pause {
  display: inline-block;
}

.rs__play .rs__ico {
  color: #17141a;
}

.rs__level {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rs__levelLabel {
  font-weight: 700;
  font-size: clamp(10px, 2.6vw, 11px);
  color: rgba(255, 247, 230, 0.82);
}

.rs__levelBox {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 20px;
  border-radius: 4px;
  padding: 0 4px;
  background: rgba(255, 247, 230, 0.16);
  color: #fff7e6;
  font-weight: 800;
  font-size: clamp(11px, 3vw, 12px);
  line-height: 1;
}

.rs__loop {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
}

.rs__loop i {
  grid-area: 1/1;
  font-style: normal;
  visibility: hidden;
}

.rs.is-demo .rs__bar {
  animation-name: rsWave;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
  animation-delay: calc(var(--i) * -41ms);
  transition: none;
}

@keyframes rsWave {
  0% {
    transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(0.12);
  }
  14% {
    transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(0.94);
  }
  28% {
    transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(0.34);
  }
  42% {
    transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(0.7);
  }
  56% {
    transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(0.2);
  }
  70% {
    transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(0.82);
  }
  84% {
    transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(0.28);
  }
  100% {
    transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(0.12);
  }
}
.rs.is-demo .rs__levelText {
  color: transparent;
}

.rs.is-demo .rs__loop {
  visibility: visible;
}

.rs.is-demo .rs__loop i {
  animation-name: rsBandName;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.rs.is-demo .rs__loop i:nth-child(1) {
  animation-delay: 0ms;
}

.rs.is-demo .rs__loop i:nth-child(2) {
  animation-delay: 666ms;
}

.rs.is-demo .rs__loop i:nth-child(3) {
  animation-delay: 1332ms;
}

@keyframes rsBandName {
  0%, 33% {
    visibility: visible;
  }
  34%, 100% {
    visibility: hidden;
  }
}
@media (max-width: 340px) {
  .rs {
    gap: 0;
  }
  .rs__dial {
    width: 120px;
    height: 120px;
  }
  .rs__bar {
    height: 18px;
    width: 4px;
  }
  .rs__hub {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
  }
  .rs__bar {
    transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-38px) scaleY(var(--h, 0.12));
  }
  .rs.is-demo .rs__bar {
    animation: none !important;
    transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-38px) scaleY(calc(0.3 + var(--i) * 0.01));
  }
  .rs__foot {
    gap: 8px;
  }
  .rs__play {
    padding: 4px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rs.is-demo .rs__bar,
  .rs.is-demo .rs__loop i {
    animation: none !important;
  }
  .rs.is-demo .rs__bar {
    transform: rotate(calc(var(--i) * 1turn / 48)) translateY(-50px) scaleY(calc(0.22 + sin(var(--i) / 48 * 3.14159) * 0.6)) !important;
  }
  .rs.is-demo .rs__levelText {
    color: #fff7e6 !important;
  }
  .rs.is-demo .rs__loop {
    visibility: hidden !important;
  }
  .rs__bar {
    transition: none !important;
  }
}

var root = document.getElementById('rs');
var barBox = document.getElementById('bars');
var playBtn = document.getElementById('play');
var playLabel = document.getElementById('playLabel');
var levelText = document.getElementById('levelText');
var BAR_COUNT = 48;
var bars = [];
// 원 둘레를 48 등분해 한 구간씩 맡긴다. --i 는 그 등분 번호이고, 각도는 1turn / 48 로 계산된다.
// 좌우 대칭 없이 순서대로 돌린다 — 원형에서는 거울보다 시계 방향이 자연스럽다.
for (var i = 0; i < BAR_COUNT; i++) {
  var bar = document.createElement('span');
  bar.className = 'rs__bar';
  bar.style.setProperty('--i', String(i));
  bar.setAttribute('data-band', String(i % 16));
  barBox.appendChild(bar);
  bars.push(bar);
}
var ctx = null, analyser = null, freq = null, timer = 0, playing = false;
var BAND_NAMES = ['Bass', 'Mid', 'Treble'];
function buildAudio() {
  ctx = new (window.AudioContext || window.webkitAudioContext)();
  analyser = ctx.createAnalyser();
  analyser.fftSize = 64;
  analyser.smoothingTimeConstant = 0.72;
  freq = new Uint8Array(analyser.frequencyBinCount);
  var out = ctx.createGain();
  out.gain.value = 0.06;
  out.connect(analyser);
  analyser.connect(ctx.destination);
  // 외부 음원 파일 없이 코드 진행을 직접 합성한다 — 네 박자마다 화음이 바뀐다.
  [196, 246.94, 293.66, 392].forEach(function (hz, n) {
    var osc = ctx.createOscillator();
    var amp = ctx.createGain();
    osc.type = n === 3 ? 'triangle' : 'sawtooth';
    osc.frequency.value = hz;
    amp.gain.value = 0;
    for (var beat = 0; beat < 64; beat++) {
      var at = ctx.currentTime + beat * 0.5;
      amp.gain.setValueAtTime(beat % 4 === n % 4 ? 0.9 : 0.25, at);
      amp.gain.exponentialRampToValueAtTime(0.02, at + 0.45);
    }
    osc.connect(amp); amp.connect(out); osc.start();
  });
}
function draw() {
  analyser.getByteFrequencyData(freq);
  var sums = [0, 0, 0];
  for (var i = 0; i < bars.length; i++) {
    var band = Number(bars[i].getAttribute('data-band'));
    var v = freq[band + 1] / 255;
    bars[i].style.setProperty('--h', (0.08 + v * 0.92).toFixed(3));
    sums[Math.min(2, Math.floor(band / 6))] += v;
  }
  var top = sums.indexOf(Math.max(sums[0], sums[1], sums[2]));
  if (levelText.textContent !== BAND_NAMES[top]) { levelText.textContent = BAND_NAMES[top]; }
  timer = requestAnimationFrame(draw);
}
playBtn.addEventListener('click', function () {
  root.classList.remove('is-demo');
  if (!ctx) { buildAudio(); }
  playing = !playing;
  playBtn.setAttribute('aria-pressed', playing ? 'true' : 'false');
  playLabel.textContent = playing ? 'Stop' : 'Play';
  // 자동재생 정책: AudioContext 는 사용자 제스처 뒤 resume() 해야 소리가 난다.
  if (playing) { ctx.resume(); timer = requestAnimationFrame(draw); }
  else { ctx.suspend(); cancelAnimationFrame(timer); }
});

// RadialSpectrum — vanilla 판(run/291/demo/02-audio-viz-radial-spectrum/index.html) 의 React 포트.
// 주파수 구간 하나가 원 둘레의 막대 하나. 재생을 누르면 합성 음원의 AnalyserNode 값으로 막대가 자란다.
import { useEffect, useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./RadialSpectrum.module.scss";

export type RadialSpectrumProps = {
  /** 격자 미리보기용 2초 자동 루프. 재생을 누르면 꺼진다 */
  demo?: boolean;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type BarVars = CSSProperties & { "--i"?: string; "--h"?: string };
/** ambient 타입에 useRef<T> 의 null 합집합이 없어 로컬로 좁힌다 */
type Box<T> = { current: T };

const BAR_COUNT = 48;
const BAND_NAMES = ["저음", "중음", "고음"];

export default function RadialSpectrum({
  demo = true,
  duration = 220,
  easing = "cubic-bezier(.2, .8, .2, 1)",
  color = "#4cd4a6",
}: RadialSpectrumProps) {
  const [live, setLive] = useState(demo);
  const [playing, setPlaying] = useState(false);
  const [heights, setHeights] = useState<number[]>([]);
  const [band, setBand] = useState(BAND_NAMES[0]);
  const ctxBox = useRef(null) as Box<AudioContext | null>;
  const nodeBox = useRef(null) as Box<AnalyserNode | null>;
  const frameBox = useRef(0) as Box<number>;
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  useEffect(() => {
    return () => {
      cancelAnimationFrame(frameBox.current);
      if (ctxBox.current) {
        ctxBox.current.close();
      }
    };
  }, []);

  function buildAudio() {
    const ctx = new AudioContext();
    const analyser = ctx.createAnalyser();
    analyser.fftSize = 64;
    analyser.smoothingTimeConstant = 0.72;
    const out = ctx.createGain();
    out.gain.value = 0.06;
    out.connect(analyser);
    analyser.connect(ctx.destination);
    // 외부 음원 파일 없이 코드 진행을 직접 합성한다 — 네 박자마다 화음이 바뀐다.
    [196, 246.94, 293.66, 392].forEach((hz, n) => {
      const osc = ctx.createOscillator();
      const amp = ctx.createGain();
      osc.type = n === 3 ? "triangle" : "sawtooth";
      osc.frequency.value = hz;
      amp.gain.value = 0;
      for (let beat = 0; beat < 64; beat++) {
        const at = ctx.currentTime + beat * 0.5;
        amp.gain.setValueAtTime(beat % 4 === n % 4 ? 0.9 : 0.25, at);
        amp.gain.exponentialRampToValueAtTime(0.02, at + 0.45);
      }
      osc.connect(amp);
      amp.connect(out);
      osc.start();
    });
    ctxBox.current = ctx;
    nodeBox.current = analyser;
  }

  function draw() {
    const analyser = nodeBox.current;
    if (!analyser) {
      return;
    }
    const freq = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(freq);
    const sums = [0, 0, 0];
    const next: number[] = [];
    for (let i = 0; i < BAR_COUNT; i++) {
      const b = i % 16;
      const v = freq[b + 1] / 255;
      sums[Math.min(2, Math.floor(b / 6))] += v;
      next.push(0.08 + v * 0.92);
    }
    setHeights(next);
    setBand(BAND_NAMES[sums.indexOf(Math.max(sums[0], sums[1], sums[2]))]);
    frameBox.current = requestAnimationFrame(draw);
  }

  function toggle() {
    setLive(false);
    if (!ctxBox.current) {
      buildAudio();
    }
    const ctx = ctxBox.current;
    if (!ctx) {
      return;
    }
    const next = !playing;
    setPlaying(next);
    // 자동재생 정책: AudioContext 는 사용자 제스처 뒤 resume() 해야 소리가 난다.
    if (next) {
      ctx.resume();
      frameBox.current = requestAnimationFrame(draw);
    } else {
      ctx.suspend();
      cancelAnimationFrame(frameBox.current);
    }
  }

  const cls = [styles.root, live ? styles.isDemo : ""].filter(Boolean).join(" ");
  return (
    <main className={styles.stage} style={vars}>
      <svg width="0" height="0" style={{ position: "absolute" }} aria-hidden="true">
        <defs>
          <symbol id="ico-waveform" viewBox="0 0 256 256" fill="currentColor">
            <path d="M208 96v64H48V96Z" opacity=".2" />
            <path d="M56 96v64a8 8 0 0 1-16 0V96a8 8 0 0 1 16 0m32-72a8 8 0 0 0-8 8v192a8 8 0 0 0 16 0V32a8 8 0 0 0-8-8m40 32a8 8 0 0 0-8 8v128a8 8 0 0 0 16 0V64a8 8 0 0 0-8-8m40 32a8 8 0 0 0-8 8v64a8 8 0 0 0 16 0V96a8 8 0 0 0-8-8m40-16a8 8 0 0 0-8 8v96a8 8 0 0 0 16 0V72a8 8 0 0 0-8-8" />
          </symbol>
          <symbol id="ico-play" viewBox="0 0 256 256" fill="currentColor">
            <path d="M228.23 134.69L84.15 222.81A8 8 0 0 1 72 216.12V39.88a8 8 0 0 1 12.15-6.69l144.08 88.12a7.82 7.82 0 0 1 0 13.38" opacity=".2" />
            <path d="M232.4 114.49L88.32 26.35a16 16 0 0 0-16.2-.3A15.86 15.86 0 0 0 64 39.87v176.26A15.94 15.94 0 0 0 80 232a16.07 16.07 0 0 0 8.36-2.35l144.04-88.14a15.88 15.88 0 0 0 0-27.02M80 215.94V40l143.83 88Z" />
          </symbol>
          <symbol id="ico-pause" viewBox="0 0 256 256" fill="currentColor">
            <path d="M208 48v160a8 8 0 0 1-8 8h-40a8 8 0 0 1-8-8V48a8 8 0 0 1 8-8h40a8 8 0 0 1 8 8M96 40H56a8 8 0 0 0-8 8v160a8 8 0 0 0 8 8h40a8 8 0 0 0 8-8V48a8 8 0 0 0-8-8" opacity=".2" />
            <path d="M200 32h-40a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h40a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m0 176h-40V48h40zM96 32H56a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h40a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m0 176H56V48h40z" />
          </symbol>
        </defs>
      </svg>
      <div className={cls}>
        <p className={styles.hint}>
          <svg className={styles.ico} aria-hidden="true">
            <use href="#ico-waveform" />
          </svg>
          <span>재생을 누르면 실제 소리로 움직입니다</span>
        </p>
        <div className={styles.dial} aria-hidden="true">
          <div className={styles.bars}>
            {Array.from({ length: BAR_COUNT }, (_, i) => {
              const barVars: BarVars = { "--i": String(i) };
              if (heights[i] !== undefined) {
                barVars["--h"] = heights[i].toFixed(3);
              }
              return <span className={styles.bar} key={i} style={barVars} />;
            })}
          </div>
          <div className={styles.hub}>
            <svg className={styles.hubIco} aria-hidden="true">
              <use href="#ico-waveform" />
            </svg>
          </div>
        </div>
        <div className={styles.foot}>
          <button className={styles.play} type="button" aria-pressed={playing} onClick={toggle}>
            <svg className={[styles.ico, playing ? styles.icoHidden : ""].join(" ")} aria-hidden="true">
              <use href="#ico-play" />
            </svg>
            <svg className={[styles.ico, playing ? "" : styles.icoHidden].join(" ")} aria-hidden="true">
              <use href="#ico-pause" />
            </svg>
            <span>{playing ? "정지" : "재생"}</span>
          </button>
          <p className={styles.level}>
            <span className={styles.levelLabel}>센 대역</span>
            <b className={styles.levelBox}>
              <span className={styles.levelText} aria-live="polite">
                {band}
              </span>
              <span className={styles.loop} aria-hidden="true">
                <i>저음</i>
                <i>중음</i>
                <i>고음</i>
              </span>
            </b>
          </p>
        </div>
      </div>
    </main>
  );
}