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

const DISTANCE = 50

/**
 * ==============   Utils   ================
 */

const degreesToRadians = (degrees: number) => (degrees * Math.PI) / 180
function pointFromVector(
  origin: { x: number; y: number },
  angle: number,
  distance: number
) {
  angle = degreesToRadians(angle)

  return {
    x: distance * Math.cos(angle) + origin.x,
    y: distance * Math.sin(angle) + origin.y,
  }
}

/**
 * ==============   Styles   ================
 */

const dot = {
  width: '20px',
  height: '20px',
  borderRadius: '10px',
}
</script>

<template>
  <Cursor style="background-color: white;" />
  <Cursor
    follow
    :offset="pointFromVector({ x: 0, y: 0 }, (360 / 6) * 0, DISTANCE)"
    :center="{ x: 0.5, y: 0.5 }"
    :spring="{ stiffness: 50 }"
    :exit="{ opacity: 0 }"
    :style="{ backgroundColor: '#ff0088', ...dot }"
  />
  <Cursor
    follow
    :offset="pointFromVector({ x: 0, y: 0 }, (360 / 6) * 1, DISTANCE)"
    :center="{ x: 0.5, y: 0.5 }"
    :spring="{ stiffness: 75 }"
    :exit="{ opacity: 0 }"
    :style="{ backgroundColor: '#dd00ee', ...dot }"
  />
  <Cursor
    follow
    :offset="pointFromVector({ x: 0, y: 0 }, (360 / 6) * 2, DISTANCE)"
    :center="{ x: 0.5, y: 0.5 }"
    :spring="{ stiffness: 120 }"
    :exit="{ opacity: 0 }"
    :style="{ backgroundColor: '#9911ff', ...dot }"
  />
  <Cursor
    follow
    :offset="pointFromVector({ x: 0, y: 0 }, (360 / 6) * 3, DISTANCE)"
    :center="{ x: 0.5, y: 0.5 }"
    :spring="{ stiffness: 180 }"
    :exit="{ opacity: 0 }"
    :style="{ backgroundColor: '#0d63f8', ...dot }"
  />
  <Cursor
    follow
    :offset="pointFromVector({ x: 0, y: 0 }, (360 / 6) * 4, DISTANCE)"
    :center="{ x: 0.5, y: 0.5 }"
    :spring="{ stiffness: 260 }"
    :exit="{ opacity: 0 }"
    :style="{ backgroundColor: '#0cdcf7', ...dot }"
  />
  <Cursor
    follow
    :offset="pointFromVector({ x: 0, y: 0 }, (360 / 6) * 5, DISTANCE)"
    :center="{ x: 0.5, y: 0.5 }"
    :spring="{ stiffness: 400 }"
    :exit="{ opacity: 0 }"
    :style="{ backgroundColor: '#4ff0b7', ...dot }"
  />
</template>