archy/neode-ui/src/components/Screensaver.vue

<template>
  <Teleport to="body">
    <Transition name="screensaver">
      <div
        v-if="store.isActive"
        class="screensaver-container fixed inset-0 z-[3000] bg-black cursor-pointer"
        @click="store.deactivate()"
        @keydown.escape="store.deactivate()"
      >
        <!-- Logo with audio viz ring - explicitly centered in viewport -->
        <div class="screensaver-content">
          <!-- Radial audio visualization - bars around the logo -->
          <div class="screensaver-viz-ring">
            <div
              v-for="(_, i) in segmentCount"
              :key="i"
              class="screensaver-viz-segment"
              :style="getSegmentStyle(i)"
            />
          </div>
          <!-- Logo in center -->
          <div class="screensaver-logo-wrapper relative z-10">
            <AnimatedLogo size="xl" />
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue'
import AnimatedLogo from '@/components/AnimatedLogo.vue'
import { useScreensaverStore } from '@/stores/screensaver'

const store = useScreensaverStore()

const segmentCount = 48

function getSegmentStyle(i: number) {
  const deg = (i / segmentCount) * 360
  return {
    '--segment-index': i,
    '--segment-deg': `${deg}deg`,
  }
}

// Dismiss on any key (except when typing)
function onKeyDown(e: KeyboardEvent) {
  if (store.isActive) {
    store.deactivate()
    e.preventDefault()
  }
}

onMounted(() => {
  window.addEventListener('keydown', onKeyDown)
})
onBeforeUnmount(() => {
  window.removeEventListener('keydown', onKeyDown)
})
</script>

<style scoped>
.screensaver-enter-active,
.screensaver-leave-active {
  transition: opacity 0.5s ease;
}
.screensaver-enter-from,
.screensaver-leave-to {
  opacity: 0;
}

/* Explicit viewport centering */
.screensaver-container {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

.screensaver-content {
  position: relative;
  width: 280px;
  height: 280px;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .screensaver-content {
    width: 360px;
    height: 360px;
  }
}

@media (min-width: 768px) {
  .screensaver-content {
    width: 400px;
    height: 400px;
  }
}

/* Ring of segments around the logo - audio viz style */
.screensaver-viz-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  --viz-radius: 140px;
}

@media (min-width: 640px) {
  .screensaver-viz-ring {
    --viz-radius: 180px;
  }
}

@media (min-width: 768px) {
  .screensaver-viz-ring {
    --viz-radius: 200px;
  }
}

.screensaver-viz-segment {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 24px;
  margin-left: -2px;
  margin-top: -12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
  border-radius: 2px;
  /* Origin at segment center = ring center (segment is centered via left/top 50%) */
  transform-origin: center center;
  transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius)));
  animation: segment-pulse 2s ease-in-out infinite;
  animation-delay: calc(var(--segment-index) * 0.02s);
}

@media (min-width: 768px) {
  .screensaver-viz-segment {
    height: 28px;
    margin-top: -14px;
  }
}

@keyframes segment-pulse {
  0%, 100% {
    opacity: 0.3;
    transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(0.4);
  }
  50% {
    opacity: 0.9;
    transform: rotate(var(--segment-deg)) translateY(calc(-1 * var(--viz-radius))) scaleY(1);
  }
}

.screensaver-logo-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.15));
}
</style>