Halo

pnpm dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/halo.json

npx shadcn@latest add https://motion-kit-astro.vercel.app/r/halo.json

bunx --bun shadcn@latest add https://motion-kit-astro.vercel.app/r/halo.json

yarn dlx shadcn@latest add https://motion-kit-astro.vercel.app/r/halo.json

---
import "@/components/motion-kit/halo-element.ts";
---

<motion-halo
  scale={1}
  offset-x={0}
  offset-y={0}
  rotation={0}
  rotation-speed={0.5}
  background-color="#17181A"
  camera-distance={3}
  sun-x={0}
  sun-y={0}
  sun-z={1}
  intensity={1}
  class="w-full h-[500px]"
/>

import "@/components/motion-kit/halo-element.ts";

export default function Page() {
  return (
    <motion-halo
      scale={1}
      offset-x={0}
      offset-y={0}
      rotation={0}
      rotation-speed={0.5}
      background-color="#17181A"
      camera-distance={3}
      sun-x={0}
      sun-y={0}
      sun-z={1}
      intensity={1}
      className="w-full h-[500px]"
    />
  );
}

<script setup>
import "@/components/motion-kit/halo-element.ts";
</script>

<template>
  <motion-halo
    :scale="1"
    :offset-x="0"
    :offset-y="0"
    :rotation="0"
    :rotation-speed="0.5"
    background-color="#17181A"
    :camera-distance="3"
    :sun-x="0"
    :sun-y="0"
    :sun-z="1"
    :intensity="1"
    class="w-full h-[500px]"
  />
</template>

<script>
  import "@/components/motion-kit/halo-element.ts";
</script>

<motion-halo
  scale={1}
  offset-x={0}
  offset-y={0}
  rotation={0}
  rotation-speed={0.5}
  background-color="#17181A"
  camera-distance={3}
  sun-x={0}
  sun-y={0}
  sun-z={1}
  intensity={1}
  class="w-full h-[500px]"
/>

<script type="module" src="/components/motion-kit/halo-element.js"></script>

<motion-halo
  scale="1"
  offset-x="0"
  offset-y="0"
  rotation="0"
  rotation-speed="0.5"
  background-color="#17181A"
  camera-distance="3"
  sun-x="0"
  sun-y="0"
  sun-z="1"
  intensity="1"
  class="w-full h-[500px]"
/>