Push tentacle

src/App.vue

@@ -172,7 +172,17 @@
                     idle: !currentClipUrl
                   }"
                 ></div>
-                <div class="pulse-rays" :class="{ active: isPlaying }"></div>
+                <div class="pulse-tentacles">
+                  <span
+                    v-for="(level, index) in tentacleLevels"
+                    :key="index"
+                    class="tentacle"
+                    :style="{
+                      '--level': level.toFixed(3),
+                      '--index': index
+                    }"
+                  ></span>
+                </div>
               </div>
               <audio
                 ref="player"
@@ -270,7 +280,8 @@ export default {
       mediaElement: null as HTMLAudioElement | null,
       rayLevel: 0,
       rayHue: 200,
-      isAnswerClip: false
+      isAnswerClip: false,
+      tentacleLevels: Array.from({ length: 10 }, () => 0)
     }
   },
   computed: {
@@ -346,6 +357,7 @@ export default {
       this.frequencyData = new Uint8Array(analyser.frequencyBinCount)
       this.pulseLevel = 0
       this.rayLevel = 0
+      this.tentacleLevels = this.tentacleLevels.map(() => 0)
     },
     teardownAudio() {
       if (this.rafId) {
@@ -366,6 +378,7 @@ export default {
       this.isPlaying = false
       this.pulseLevel = 0
       this.rayLevel = 0
+      this.tentacleLevels = this.tentacleLevels.map(() => 0)
     },
     startPulse() {
       if (!this.analyser || !this.analyserData || !this.frequencyData) return
@@ -405,6 +418,19 @@ export default {
         this.rayLevel = this.rayLevel * 0.78 + rayTarget * 0.22
         const hueTarget = 180 + highAvg * 120
         this.rayHue = this.rayHue * 0.8 + hueTarget * 0.2
+
+        const bandCount = this.tentacleLevels.length
+        const binSize = Math.max(1, Math.floor(freq.length / bandCount))
+        for (let i = 0; i < bandCount; i += 1) {
+          const start = i * binSize
+          const end = i === bandCount - 1 ? freq.length : start + binSize
+          let bandSum = 0
+          for (let j = start; j < end; j += 1) bandSum += freq[j]
+          const avg = bandSum / Math.max(1, end - start) / 255
+          const shaped = Math.pow(Math.min(1, avg * 1.4), 1.6)
+          this.tentacleLevels[i] =
+            this.tentacleLevels[i] * 0.65 + shaped * 0.35
+        }
         this.rafId = requestAnimationFrame(tick)
       }