<script setup>
import { motion } from "motion-v"

const animation = {
  scale: [0, 1],
  opacity: [1, 0],
}

const transition = {
  duration: 2,
  repeat: Infinity,
  ease: "easeOut",
}
</script>

<template>
  <div class="container">
    <div class="ripple-container">
      <motion.div
        class="ripple"
        :animate="animation"
        :transition="transition"
      />
      <motion.div
        class="ripple"
        :animate="animation"
        :transition="{
          ...transition,
          delay: 0.5,
        }"
      />
      <motion.div
        class="ripple"
        :animate="animation"
        :transition="{
          ...transition,
          delay: 1,
        }"
      />
    </div>
  </div>
</template>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ripple-container {
  position: relative;
  width: 100px;
  height: 100px;
}

.ripple {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 5px solid #ff0088;
  will-change: transform, opacity;
  opacity: 0;
}
</style>