front/src/components/AnimatedBackground.vue

<template>
  <div class="animated-background" aria-hidden="true">
    <div class="bg-shape shape-1" ref="shape1"></div>
    <div class="bg-shape shape-2" ref="shape2"></div>
    <div class="bg-shape shape-3" ref="shape3"></div>
  </div>
</template>

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

defineOptions({
  name: 'AnimatedBackground'
})

const shape1 = ref<HTMLElement>()
const shape2 = ref<HTMLElement>()
const shape3 = ref<HTMLElement>()

onMounted(() => {
  const shapes = [shape1.value, shape2.value, shape3.value]

  shapes.forEach((shape, index) => {
    if (!shape) return

    gsap.set(shape, {
      x: Math.random() * window.innerWidth * 0.6,
      y: Math.random() * window.innerHeight * 0.5,
      rotation: Math.random() * 15 - 7
    })

    gsap.to(shape, {
      x: `+=${(Math.random() - 0.5) * 120}`,
      y: `+=${(Math.random() - 0.5) * 80}`,
      rotation: `+=${(Math.random() - 0.5) * 8}`,
      duration: Math.random() * 18 + 14,
      ease: 'none',
      repeat: -1,
      yoyo: true,
      delay: index * 3
    })
  })
})
</script>

<style scoped>
.animated-background {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-shape {
  position: absolute;
  border-radius: var(--ramex-radius);
  border: 1px solid var(--ramex-border);
  background: transparent;
  opacity: 0.12;
}

.shape-1 {
  width: 280px;
  height: 180px;
}

.shape-2 {
  width: 160px;
  height: 160px;
}

.shape-3 {
  width: 320px;
  height: 120px;
}
</style>