Lamp component by aceternity converted to vue using vueuse motion instead of framer-motion (https://ui.aceternity.com/components/lamp-effect)

Lamp.vue

<template>
  <div>
    <div id="LampContainer">
      <div
        class="relative z-0 flex min-h-screen w-full flex-col items-center justify-center overflow-hidden rounded-md bg-slate-950"
      >
        <div
          class="relative isolate z-0 flex w-full flex-1 scale-y-125 items-center justify-center"
        >
          <div
            id="motion"
            v-motion
            :initial="{ opacity: 0.5, width: '15rem' }"
            :visible="{
              opacity: 1,
              width: '30rem',
              transition: { delay: 300, duration: 800, ease: 'easeInOut' },
            }"
            :style="{
              backgroundImage: `conic-gradient(from 70deg at center top, var(--tw-gradient-stops))`,
            }"
            class="absolute inset-auto right-1/2 h-56 w-[30rem] overflow-visible from-cyan-500 via-transparent to-transparent text-white [from_70deg_at_center_top:from_70deg_at_center_top]"
          >
            <div
              class="absolute bottom-0 left-0 z-20 h-40 w-[100%] bg-slate-950 [mask-image:linear-gradient(to_top,white,transparent)]"
            />
            <div
              class="absolute bottom-0 left-0 z-20 h-[100%] w-40 bg-slate-950 [mask-image:linear-gradient(to_right,white,transparent)]"
            />
          </div>
          <div
            id="motion"
            v-motion
            :initial="{ opacity: 0.5, width: '15rem' }"
            :visible="{
              opacity: 1,
              width: '30rem',
              transition: { delay: 300, duration: 800, ease: 'easeInOut' },
            }"
            :style="{
              backgroundImage: `conic-gradient(from 290deg at center top, var(--tw-gradient-stops))`,
            }"
            class="absolute inset-auto left-1/2 h-56 w-[30rem] from-transparent via-transparent to-cyan-500 text-white [from_290deg_at_center_top:from_290deg_at_center_top]"
          >
            <div
              class="absolute bottom-0 right-0 z-20 h-[100%] w-40 bg-slate-950 [mask-image:linear-gradient(to_left,white,transparent)]"
            />
            <div
              class="absolute bottom-0 right-0 z-20 h-40 w-[100%] bg-slate-950 [mask-image:linear-gradient(to_top,white,transparent)]"
            />
          </div>
          <div
            class="absolute top-1/2 h-48 w-full translate-y-12 scale-x-150 bg-slate-950 blur-2xl"
          ></div>
          <div
            class="absolute top-1/2 z-50 h-48 w-full bg-transparent opacity-10 backdrop-blur-md"
          ></div>
          <div
            class="absolute inset-auto z-50 h-36 w-[28rem] -translate-y-1/2 rounded-full bg-cyan-500 opacity-50 blur-3xl"
          ></div>
          <div
            id="motion"
            v-motion
            :initial="{ width: '8rem', translateY: '-6rem' }"
            :visible="{
              width: '16rem',
              transition: { delay: 300, duration: 800, ease: 'easeInOut' },
            }"
            class="absolute inset-auto z-30 h-36 w-64 translate-y-[-6rem] rounded-full bg-cyan-400 blur-2xl"
          ></div>
          <div
            id="motion"
            v-motion
            :initial="{ width: '15rem', translateY: '-7rem' }"
            :visible="{
              width: '30rem',
              transition: { delay: 300, duration: 800, ease: 'easeInOut' },
            }"
            class="absolute inset-auto z-50 h-0.5 w-[30rem] translate-y-[-7rem] bg-cyan-400"
          ></div>

          <div
            class="absolute inset-auto z-40 h-44 w-full translate-y-[-12.5rem] bg-slate-950"
          ></div>
        </div>

        <div
          class="relative z-50 flex -translate-y-80 flex-col items-center px-5"
        >
          <h1
            id="motion"
            v-motion
            :initial="{ opacity: 500, y: 100 }"
            :visible="{
              opacity: 1,
              y: 0,
              transition: { delay: 300, duration: 800, ease: 'easeInOut' },
            }"
            class="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 bg-clip-text py-4 text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"
          >
            Lamp
          </h1>
        </div>
      </div>
    </div>
  </div>
</template>