Component Boom

src/constants/code/Animations/magnetCode.ts

@@ -0,0 +1,48 @@
+import code from '@content/Animations/Magnet/Magnet.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const magnet: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/Magnet`,
+  usage: `<template>
+  <Magnet
+    :padding="120"
+    :disabled="false"
+    :magnet-strength="3"
+    active-transition="transform 0.2s ease-out"
+    inactive-transition="transform 0.6s ease-in-out"
+    wrapper-class-name="custom-wrapper"
+    inner-class-name="custom-inner"
+  >
+    <div class="magnet-element">
+      <h3>Hover me!</h3>
+      <p>I'll follow your cursor</p>
+    </div>
+  </Magnet>
+</template>
+
+<script setup lang="ts">
+import Magnet from '@/content/Animations/Magnet/Magnet.vue'
+</script>
+
+<style scoped>
+.magnet-element {
+  padding: 2rem;
+  background: #060010;
+  border: 1px solid #333;
+  border-radius: 12px;
+  color: white;
+  text-align: center;
+}
+
+.magnet-element h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
+}
+
+.magnet-element p {
+  margin: 0;
+  opacity: 0.8;
+}
+</style>`,
+  code
+}