Merge branch 'main' into feat/image-trail

src/constants/Categories.ts

@@ -45,6 +45,7 @@ export const CATEGORIES = [
       'Magnet',
       'Cubes',
       'Blob Cursor',
+      'Meta Balls',
       'Image Trail',
     ]
   },

src/constants/Components.ts

@@ -13,6 +13,7 @@ const animations = {
   'splash-cursor': () => import('../demo/Animations/SplashCursorDemo.vue'),
   'noise': () => import('../demo/Animations/NoiseDemo.vue'),
   'blob-cursor': () => import('../demo/Animations/BlobCursorDemo.vue'),
+  'meta-balls': () => import('../demo/Animations/MetaBallsDemo.vue'),
   'image-trail': () => import('../demo/Animations/ImageTrailDemo.vue'),
 };
 

src/constants/code/Animations/metaBallsCode.ts

@@ -0,0 +1,26 @@
+import code from '@/content/Animations/MetaBalls/MetaBalls.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const metaBalls: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/MetaBalls`,
+  installation: `npm i ogl`,
+  usage: `<template>
+    <MetaBalls
+        color="color"
+        cursorBallColor="cursorBallColor"
+        :cursorBallSize="cursorBallSize"
+        :ballCount="ballCount"
+        :animationSize="animationSize"
+        :enableMouseInteraction="enableMouseInteraction"
+        :enableTransparency="true"
+        :hoverSmoothness="hoverSmoothness"
+        :clumpFactor="clumpFactor"
+        :speed="speed"
+    />
+</template>
+
+<script setup lang="ts">
+  import MetaBalls from "./MetaBalls.vue";
+</script>`,
+  code
+};