Merge branch 'main' into feat/animations-noise

src/constants/Categories.ts

@@ -43,7 +43,8 @@ export const CATEGORIES = [
       'Metallic Paint',
       'Click Spark',
       'Magnet',
-      'Cubes'
+      'Cubes',
+      'Blob Cursor',
     ]
   },
   {

src/constants/Components.ts

@@ -12,6 +12,7 @@ const animations = {
   'count-up': () => import('../demo/Animations/CountUpDemo.vue'),
   'splash-cursor': () => import('../demo/Animations/SplashCursorDemo.vue'),
   'noise': () => import('../demo/Animations/NoiseDemo.vue'),
+  'blob-cursor': () => import('../demo/Animations/BlobCursorDemo.vue'),
 };
 
 const textAnimations = {

src/constants/code/Animations/blobCursorCode.ts

@@ -0,0 +1,32 @@
+import code from '@/content/Animations/BlobCursor/BlobCursor.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const blobCursor: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/BlobCursor`,
+  installation: `npm i gsap`,
+  usage: `<template>
+  <BlobCursor
+    blobType="circle"
+    fillColor="#27FF64"
+    :trailCount="3"
+    :sizes="[60, 125, 75]"
+    :innerSizes="[20, 35, 25]"
+    innerColor="rgba(255,255,255,0.8)"
+    :opacities="[0.6, 0.6, 0.6]"
+    shadowColor="rgba(0,0,0,0.75)"
+    :shadow-Blur="5"
+    :shadowOffsetX="10"
+    :shadowOffsetY="10"
+    :filterDtdDeviation="30"
+    :useFilter="true"
+    :fastDuration="0.1"
+    :slowDuration="0.5"
+    :zIndex="100"
+  />
+</template>
+
+<script setup lang="ts">
+  import BlobCursor from "./BlobCursor.vue";
+</script>`,
+  code
+};