gimme-pet-root/site/pages/index.vue

<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>

        <button
          class="audio-toggle"
          @click="toggleAudio"
          :aria-label="muted ? 'Unmute video' : 'Mute video'"
        >
          {{ muted ? '🔇' : '🔊' }}
        </button>

        <div
          class="uwu-floating"
          :data-pos="position"
        >
          :3
        </div>
      </div>
    </div>
  </div>

  <div class="fixed bottom-4 right-6 opacity-40 text-xs select-none">
    gimme.pet
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'

const videoEl = ref<HTMLVideoElement | null>(null)
const muted = ref(true)

function toggleAudio() {
  if (!videoEl.value) return

  muted.value = !muted.value
  videoEl.value.muted = muted.value

  if (!muted.value) {
    videoEl.value.volume = 0.8
    videoEl.value.play().catch(() => {})
  }
}

const position = ref<'top' | 'bottom' | 'left' | 'right'>('top')

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'
  }
}

onMounted(() => {
   if (videoEl.value) {
    videoEl.value.muted = true
  }
  
  updatePosition()
  window.addEventListener('resize', updatePosition)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', updatePosition)
})
</script>