Audio-reactive speaker

.speaker-scene {
  display: grid;
  gap: 18px;
  place-items: center;
  align-content: center;
  height: 100%;
}

.speaker {
  display: grid;
  place-items: center;
  width: 150px;
  height: 190px;
  border-radius: 22px;
  background: #0c1324;
}

.speaker__cone {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, #5b8cff 0 18%, #1b2744 20% 55%, #2c3a60 58%);
}

<div class="speaker-scene" data-kinesis>
  <div class="speaker"><span class="speaker__cone"></span></div>
  <audio src="/media/beat.wav" controls loop></audio>
</div>

import { kinesis } from "@amineyarman/kinesis"
import { createAudio } from "@amineyarman/kinesis/audio"

const root = document.querySelector("[data-kinesis]")
const audio = createAudio(root.querySelector("audio"))

kinesis(root.querySelector(".speaker__cone")).bind({
  scale: audio.bass.map([0.78, 0.95], [1, 1.3]),
})

kinesis(root.querySelector(".speaker")).bind({
  rotate: audio.treble.map([0.15, 0.32], [0, 4]).spring("bouncy"),
})