Magnetic

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

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

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

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

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

<motion-magnetic duration="1.2">
  <button>Hover me</button>
</motion-magnetic>

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

export default function Page() {
  return (
    <motion-magnetic duration="1.2">
      <button>Hover me</button>
    </motion-magnetic>
  );
}

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

<template>
  <motion-magnetic duration="1.2">
    <button>Hover me</button>
  </motion-magnetic>
</template>

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

<motion-magnetic duration="1.2">
  <button>Hover me</button>
</motion-magnetic>

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

<motion-magnetic duration="1.2">
  <button>Hover me</button>
</motion-magnetic>