Create <Antigravity /> animation

src/constants/Categories.ts

@@ -1,5 +1,5 @@
 // Highlighted sidebar items
-export const NEW = ['Color Bends', 'Ghost Cursor', 'Laser Flow', 'Liquid Ether', 'Pixel Blast', 'Floating Lines', 'Light Pillar', 'Pixel Snow'];
+export const NEW = ['Antigravity', 'Color Bends', 'Ghost Cursor', 'Laser Flow', 'Liquid Ether', 'Pixel Blast', 'Floating Lines', 'Light Pillar', 'Pixel Snow'];
 export const UPDATED = [];
 
 // Used for main sidebar navigation
@@ -39,6 +39,7 @@ export const CATEGORIES = [
     name: 'Animations',
     subcategories: [
       'Animated Content',
+      'Antigravity',
       'Blob Cursor',
       'Click Spark',
       'Count Up',

src/constants/Components.ts

@@ -25,6 +25,7 @@ const animations = {
   'gradual-blur': () => import('../demo/Animations/GradualBlurDemo.vue'),
   'laser-flow': () => import('../demo/Animations/LaserFlowDemo.vue'),
   'ghost-cursor': () => import('../demo/Animations/GhostCursorDemo.vue'),
+  'antigravity': () => import('../demo/Animations/AntigravityDemo.vue'),
 };
 
 const textAnimations = {

src/constants/code/Animations/antigravityCode.ts

@@ -0,0 +1,29 @@
+import code from '@/content/Animations/Antigravity/Antigravity.vue?raw';
+import { createCodeObject } from '@/types/code';
+
+export const antigravity = createCodeObject(code, 'Animations/Antigravity', {
+  installation: `npm install three @types/three`,
+  usage: `<template>
+  <Antigravity
+    :count="300"
+    :magnetRadius="10"
+    :ringRadius="10"
+    :waveSpeed="0.4"
+    :waveAmplitude="1"
+    :particleSize="2"
+    :lerpSpeed="0.1"
+    color="#FF9FFC"
+    :autoAnimate="false"
+    :particleVariance="1"
+    :rotationSpeed="0"
+    :depthFactor="1"
+    :pulseSpeed="3"
+    particleShape="capsule"
+    :fieldStrength="10"
+  />
+</template>
+
+<script setup lang="ts">
+import Antigravity from "./Antigravity.vue";
+</script>`
+});