From 592c8af7c3b282844cf0ef23ae965f898cb93052 Mon Sep 17 00:00:00 2001
From: Johnny322 <sipoperle@hotmail.com>
Date: Tue, 10 Feb 2026 17:05:56 +0100
Subject: [PATCH] Web between finger for tentacles

---
 src/App.vue    |  1 +
 src/styles.css | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 436e451..a37b41d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -194,6 +194,7 @@
                 }"
                 :style="{ '--pulse': pulseLevel.toFixed(3) }"
               >
+                <div class="tentacle-web"></div>
                 <span
                   v-for="(level, index) in tentacleLevels"
                   :key="index"
diff --git a/src/styles.css b/src/styles.css
index a2948b0..2a88874 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -422,6 +422,42 @@ audio.hidden-audio {
   pointer-events: none;
 }
 
+.pulse-tentacles .tentacle-web {
+  position: absolute;
+  inset: -10px;
+  border-radius: 50%;
+  background:
+    conic-gradient(
+      from 0deg,
+      rgba(0, 0, 0, 0) 0deg,
+      currentColor 12deg,
+      rgba(0, 0, 0, 0) 24deg,
+      currentColor 36deg,
+      rgba(0, 0, 0, 0) 48deg
+    );
+  opacity: calc(0.12 + var(--pulse, 0) * 0.35);
+  filter: blur(6px);
+  mask-image: radial-gradient(
+    circle,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.55) 45%,
+    rgba(0, 0, 0, 1) 65%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
+  -webkit-mask-image: radial-gradient(
+    circle,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.55) 45%,
+    rgba(0, 0, 0, 1) 65%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  -webkit-mask-size: 100% 100%;
+  -webkit-mask-repeat: no-repeat;
+  mix-blend-mode: screen;
+}
+
 .pulse-tentacles.playing {
   animation: tentacleSpin 12s linear infinite;
 }