<template>
  <section>
    <WishScope :progress="progress"></WishScope>
  </section>
</template>

<script setup>
  // Imports
  import { onMounted, ref } from "vue"
  import WishScope from 'https://codepen.io/leemartin/pen/zYeNXZV/6397e4f038994a0fb93a695e6f2b60eb.js'
  import gsap from "https://esm.sh/gsap"
  
  // Refs
  const progress = ref(0)
  
  // On mounted
  // ----------
  onMounted(() => {
    // Tween
    gsap.to(progress, {
      duration: 5,
      repeat: -1,
      value: 1,
      yoyo: true
    })
    
  })
  
</script>

<style>
  html, body, #app, section{
    height: 100%;
    width: 100%;
  }
  
  body{
    background: linear-gradient(#000, #171940);
  }
  
  section{
    align-items: center;
    display: flex;
    justify-content: center;
  }
  
  .wish-scope{
    height: 320px;
    width: 320px;
  }
</style>