<script setup lang="ts">
import { Cursor } from 'motion-plus-vue'
</script>

<template>
  <Cursor
    class="cursor-1"
    :variants="{ pressed: { scale: 0.5 } }"
    :style="{ width:5 ,height:5 }"
  />

  <Cursor
    class="cursor-2"
    :variants="{
      pressed: { scale: 0.6, borderColor: '#dd00ee' },
    }"
    :spring="{ stiffness: 1000, damping: 50 }"
    :style="{ width:13 ,height:13 }"
  />

  <Cursor
    class="cursor-3"
    :variants="{
      pressed: { scale: 0.7, borderColor: '#9911ff' },
    }"
    :spring="{ stiffness: 800, damping: 70 }"
    :style="{ width:21 ,height:21 }"
  />

  <Cursor
    class="cursor-4"
    :variants="{
      pressed: { scale: 0.8, borderColor: '#0d63f8' },
    }"
    :spring="{ stiffness: 700, damping: 90 }"
    :style="{ width:29 ,height:29 }"
  />
</template>

<style>
.cursor-1 {
  background-color: white !important;
}

.cursor-2 {
  border-radius: 20px;
  border: 2px solid #ff0088;
  background-color: transparent !important;
}

.cursor-3 {
  border-radius: 20px;
  border: 2px solid #dd00ee;
  background-color: transparent !important;
}

.cursor-4 {
  border-radius: 20px;
  border: 2px solid #9911ff;
  background-color: transparent !important;
}
</style>