stripped out site. its better this way

site/pages/index.vue

@@ -1,88 +1,73 @@
 <template>
-  <div class="caramel-wrapper">
-    <div class="caramel-stage">
-      <div class="caramel-float-anchor">
-       <video
-          ref="videoEl"
-          class="caramel-video"
-          autoplay
-          loop
-          muted
-          playsinline
-          preload="auto"
-        >
-          <source src="~/assets/caramelldansen.webm" type="video/webm" />
-        </video>
+  <div class="stage">
+    <video
+      ref="videoEl"
+      class="video"
+      src="/caramelldansen.webm"
+      autoplay
+      loop
+      playsinline
+      preload="auto"
+      muted
+    />
 
-        <button
-          class="audio-toggle"
-          @click="toggleAudio"
-          :aria-label="muted ? 'Unmute video' : 'Mute video'"
-        >
-          {{ muted ? '🔇' : '🔊' }}
-        </button>
+    <div class="controls">
+      <button
+        class="audio-toggle"
+        :aria-label="muted ? 'Unmute video' : 'Mute video'"
+        @click="toggleMute"
+      >
+        {{ muted || volume === 0 ? '🔇' : '🔊' }}
+      </button>
 
-        <div
-          class="uwu-floating"
-          :data-pos="position"
-        >
-          :3
-        </div>
-      </div>
+      <input
+        v-model.number="volume"
+        class="volume"
+        type="range"
+        min="0"
+        max="1"
+        step="0.01"
+        aria-label="Volume"
+      />
     </div>
-  </div>
 
-  <div class="fixed bottom-4 right-6 opacity-40 text-xs select-none">
-    gimme.pet
+    <div class="brand">gimme.pet</div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 
 const videoEl = ref<HTMLVideoElement | null>(null)
 const muted = ref(true)
+const volume = ref(0.8)
 
-function toggleAudio() {
-  if (!videoEl.value) return
-
+// Browsers only allow autoplay while muted, so we start muted and let the
+// first user gesture turn the sound on.
+function toggleMute() {
   muted.value = !muted.value
-  videoEl.value.muted = muted.value
 
   if (!muted.value) {
-    videoEl.value.volume = 0.8
-    videoEl.value.play().catch(() => {})
+    if (volume.value === 0) volume.value = 0.8
+    videoEl.value?.play().catch(() => {})
   }
 }
 
-const position = ref<'top' | 'bottom' | 'left' | 'right'>('top')
+watch([muted, volume], ([isMuted, vol]) => {
+  if (!videoEl.value) return
+  videoEl.value.muted = isMuted
+  videoEl.value.volume = vol
+})
 
-function updatePosition() {
-  const vw = window.innerWidth
-  const vh = window.innerHeight
-
-  // prioritize not colliding with short screens
-  if (vh < 520) {
-    position.value = 'bottom'
-  } else if (vw < 480) {
-    position.value = 'left'
-  } else if (vw > 1200) {
-    position.value = 'right'
-  } else {
-    position.value = 'top'
-  }
-}
+watch(volume, (vol, prev) => {
+  if (vol > 0 && prev === 0) muted.value = false
+  if (vol === 0) muted.value = true
+})
 
 onMounted(() => {
-   if (videoEl.value) {
-    videoEl.value.muted = true
-  }
-  
-  updatePosition()
-  window.addEventListener('resize', updatePosition)
-})
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', updatePosition)
+  if (!videoEl.value) return
+  videoEl.value.muted = muted.value
+  videoEl.value.volume = volume.value
+  videoEl.value.play().catch(() => {})
 })
 </script>