From b2ca79d4ab31556221a464bc176d3ab3e391a9f7 Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Sun, 13 Jul 2025 16:22:51 +0530
Subject: [PATCH] Added <BlobCursor /> animation

---
 src/constants/Categories.ts                   |   3 +-
 src/constants/Components.ts                   |   1 +
 .../code/Animations/blobCursorCode.ts         |  32 ++
 .../Animations/BlobCursor/BlobCursor.vue      | 141 ++++++++
 src/demo/Animations/BlobCursorDemo.vue        | 307 ++++++++++++++++++
 5 files changed, 483 insertions(+), 1 deletion(-)
 create mode 100644 src/constants/code/Animations/blobCursorCode.ts
 create mode 100644 src/content/Animations/BlobCursor/BlobCursor.vue
 create mode 100644 src/demo/Animations/BlobCursorDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index b26b32f..1a4c567 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -42,7 +42,8 @@ export const CATEGORIES = [
       'Metallic Paint',
       'Click Spark',
       'Magnet',
-      'Cubes'
+      'Cubes',
+      'Blob Cursor',
     ]
   },
   {
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index 6437cbf..f511256 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -11,6 +11,7 @@ const animations = {
   'cubes': () => import('../demo/Animations/CubesDemo.vue'),
   'count-up': () => import('../demo/Animations/CountUpDemo.vue'),
   'splash-cursor': () => import('../demo/Animations/SplashCursorDemo.vue'),
+  'blob-cursor': () => import('../demo/Animations/BlobCursorDemo.vue'),
 };
 
 const textAnimations = {
diff --git a/src/constants/code/Animations/blobCursorCode.ts b/src/constants/code/Animations/blobCursorCode.ts
new file mode 100644
index 0000000..1bf3db1
--- /dev/null
+++ b/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
+};
diff --git a/src/content/Animations/BlobCursor/BlobCursor.vue b/src/content/Animations/BlobCursor/BlobCursor.vue
new file mode 100644
index 0000000..896502a
--- /dev/null
+++ b/src/content/Animations/BlobCursor/BlobCursor.vue
@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import gsap from 'gsap';
+import { onMounted, onUnmounted, ref } from 'vue';
+
+interface BlobCursorProps {
+  blobType?: 'circle' | 'square';
+  fillColor?: string;
+  trailCount?: number;
+  sizes?: number[];
+  innerSizes?: number[];
+  innerColor?: string;
+  opacities?: number[];
+  shadowColor?: string;
+  shadowBlur?: number;
+  shadowOffsetX?: number;
+  shadowOffsetY?: number;
+  filterId?: string;
+  filterStdDeviation?: number;
+  filterColorMatrixValues?: string;
+  useFilter?: boolean;
+  fastDuration?: number;
+  slowDuration?: number;
+  fastEase?: string;
+  slowEase?: string;
+  zIndex?: number;
+}
+
+const props = withDefaults(defineProps<BlobCursorProps>(), {
+  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)',
+  shadowBlur: 5,
+  shadowOffsetX: 10,
+  shadowOffsetY: 10,
+  filterId: 'blob',
+  filterStdDeviation: 30,
+  filterColorMatrixValues: '1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -10',
+  useFilter: true,
+  fastDuration: 0.1,
+  slowDuration: 0.5,
+  fastEase: 'power3.out',
+  slowEase: 'power1.out',
+  zIndex: 100
+});
+
+const containerRef = ref<HTMLDivElement | null>(null);
+const blobsRef = ref<(HTMLElement | null)[]>([]);
+
+const updateOffset = () => {
+  if (!containerRef.value) return { left: 0, top: 0 };
+  const rect = containerRef.value.getBoundingClientRect();
+  return { left: rect.left, top: rect.top };
+};
+
+const handleMove = (e: MouseEvent | TouchEvent) => {
+  const { left, top } = updateOffset();
+  const x = 'clientX' in e ? e.clientX : e.touches[0].clientX;
+  const y = 'clientY' in e ? e.clientY : e.touches[0].clientY;
+
+  blobsRef.value.forEach((el, i) => {
+    if (!el) return;
+
+    const isLead = i === 0;
+    gsap.to(el, {
+      x: x - left,
+      y: y - top,
+      duration: isLead ? props.fastDuration : props.slowDuration,
+      ease: isLead ? props.fastEase : props.slowEase
+    });
+  });
+};
+
+onMounted(() => {
+  if (!updateOffset) return;
+  window.addEventListener('resize', updateOffset);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', updateOffset);
+});
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    @mousemove="handleMove"
+    @touchmove="handleMove"
+    class="top-0 left-0 relative w-full h-full"
+    :style="{ zIndex: props.zIndex }"
+  >
+    <svg v-if="props.useFilter" class="absolute w-0 h-0">
+      <filter :id="props.filterId">
+        <feGaussianBlur in="SourceGraphic" result="blur" :stdDeviation="props.filterStdDeviation" />
+        <feColorMatrix in="blur" :values="props.filterColorMatrixValues" />
+      </filter>
+    </svg>
+
+    <div
+      class="absolute inset-0 overflow-hidden cursor-default pointer-events-none select-none"
+      :style="{
+        filter: props.useFilter ? `url(#${props.filterId})` : undefined
+      }"
+    >
+      <div
+        v-for="(_, i) in props.trailCount"
+        :key="i"
+        :ref="
+          el => {
+            blobsRef[i] = el as HTMLElement | null;
+          }
+        "
+        class="absolute -translate-x-1/2 -translate-y-1/2 will-change-transform transform"
+        :style="{
+          width: `${props.sizes[i]}px`,
+          height: `${props.sizes[i]}px`,
+          borderRadius: props.blobType === 'circle' ? '50%' : '0',
+          backgroundColor: props.fillColor,
+          opacity: props.opacities[i],
+          boxShadow: `${props.shadowOffsetX}px ${props.shadowOffsetY}px ${props.shadowBlur}px 0 ${props.shadowColor}`
+        }"
+      >
+        <div
+          class="absolute"
+          :style="{
+            width: `${props.innerSizes[i]}px`,
+            height: `${props.innerSizes[i]}px`,
+            top: `${(props.sizes[i] - props.innerSizes[i]) / 2}px`,
+            left: `${(props.sizes[i] - props.innerSizes[i]) / 2}px`,
+            backgroundColor: props.innerColor,
+            borderRadius: props.blobType === 'circle' ? '50%' : '0'
+          }"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/demo/Animations/BlobCursorDemo.vue b/src/demo/Animations/BlobCursorDemo.vue
new file mode 100644
index 0000000..4cd8fe3
--- /dev/null
+++ b/src/demo/Animations/BlobCursorDemo.vue
@@ -0,0 +1,307 @@
+<template>
+  <TabbedLayout>
+    <template #preview>
+      <div class="relative h-[600px] overflow-hidden demo-container">
+        <BlobCursor
+          :blobType="blobType"
+          :fillColor="fillColor"
+          :trailCount="trailCount"
+          :sizes="sizes"
+          :innerSizes="innerSizes"
+          :innerColor="innerColor"
+          :opacities="opacities"
+          :shadowColor="shadowColor"
+          :shadowBlur="shadowBlur"
+          :shadowOffsetX="shadowOffsetX"
+          :shadowOffsetY="shadowOffsetY"
+          :fastDuration="fastDuration"
+          :slowDuration="slowDuration"
+          :zIndex="zIndex"
+        />
+      </div>
+
+      <Customize>
+        <button
+          @click="
+            () => {
+              blobType = blobType === 'circle' ? 'square' : 'circle';
+            }
+          "
+          class="bg-[#170D27] hover:bg-[#271E37] mb-2 px-3 border border-[#271E37] rounded-[10px] h-8 text-white text-xs transition"
+        >
+          Blob Type:
+          <span class="ml-1 text-gray-400">{{ blobType }}</span>
+        </button>
+
+        <div class="flex flex-col gap-2 mt-2 text-xs">
+          <div class="flex items-center gap-3">
+            <label for="fillColor">Fill Color:</label>
+            <input
+              id="fillColor"
+              type="color"
+              v-model="fillColor"
+              class="bg-transparent rounded-full w-16 h-8 appearance-none cursor-pointer"
+            />
+          </div>
+
+          <div class="flex items-center gap-3">
+            <label for="innerColor">Inner Color:</label>
+            <input
+              id="innerColor"
+              type="color"
+              v-model="innerColor"
+              class="bg-transparent rounded-full w-16 h-8 appearance-none cursor-pointer"
+            />
+          </div>
+
+          <div class="flex items-center gap-3">
+            <label for="shadowColor">Shadow Color:</label>
+            <input
+              id="shadowColor"
+              type="color"
+              v-model="shadowColor"
+              class="bg-transparent rounded-full w-16 h-8 appearance-none cursor-pointer"
+            />
+          </div>
+        </div>
+
+        <PreviewSlider
+          title="Trail Count"
+          :min="1"
+          :max="5"
+          :step="1"
+          v-model="trailCount"
+          @onChange="
+            (val: number) => {
+              trailCount = val;
+              const newSizes = Array(val)
+                .fill(0)
+                .map((_, i) => sizes[i] || sizes[sizes.length - 1] || 60);
+              const newInnerSizes = Array(val)
+                .fill(0)
+                .map((_, i) => innerSizes[i] || innerSizes[innerSizes.length - 1] || 20);
+              const newOpacities = Array(val)
+                .fill(0)
+                .map((_, i) => opacities[i] || opacities[opacities.length - 1] || 0.6);
+              sizes = newSizes;
+              innerSizes = newInnerSizes;
+              opacities = newOpacities;
+            }
+          "
+        />
+        <PreviewSlider
+          title="Lead Blob Size"
+          :min="10"
+          :max="200"
+          :step="1"
+          v-model="sizes[0]"
+          @onChange="
+            (val: number) => {
+              sizes[0] = val;
+            }
+          "
+          :isDisabled="trailCount < 1"
+        />
+        <PreviewSlider
+          title="Lead Inner Dot Size"
+          :min="1"
+          :max="100"
+          :step="1"
+          v-model="innerSizes[0]"
+          @onChange="
+            (val: number) => {
+              innerSizes[0] = val;
+            }
+          "
+          :isDisabled="trailCount < 1"
+        />
+        <PreviewSlider
+          title="Lead Blob Opacity"
+          :min="0.1"
+          :max="1"
+          :step="0.05"
+          v-model="opacities[0]"
+          @onChange="
+            (val: number) => {
+              opacities[0] = val;
+            }
+          "
+          :isDisabled="trailCount < 1"
+        />
+        <PreviewSlider
+          title="Shadow Blur"
+          :min="0"
+          :max="50"
+          :step="1"
+          v-model="shadowBlur"
+          @onChange="
+            (val: number) => {
+              shadowBlur = val;
+            }
+          "
+        />
+        <PreviewSlider
+          title="Shadow Offset X"
+          :min="-50"
+          :max="50"
+          :step="1"
+          v-model="shadowOffsetX"
+          @onChange="
+            (val: number) => {
+              shadowOffsetX = val;
+            }
+          "
+        />
+        <PreviewSlider
+          title="Shadow Offset Y"
+          :min="-50"
+          :max="50"
+          :step="1"
+          v-model="shadowOffsetY"
+          @onChange="
+            (val: number) => {
+              shadowOffsetY = val;
+            }
+          "
+        />
+        <PreviewSlider
+          title="Fast Duration (Lead)"
+          :min="0.01"
+          :max="2"
+          :step="0.01"
+          v-model="fastDuration"
+          @onChange="
+            (val: number) => {
+              fastDuration = val;
+            }
+          "
+        />
+        <PreviewSlider
+          title="Slow Duration (Trail)"
+          :min="0.01"
+          :max="3"
+          :step="0.01"
+          v-model="slowDuration"
+          @onChange="
+            (val: number) => {
+              slowDuration = val;
+            }
+          "
+        />
+        <PreviewSlider
+          title="Z-Index"
+          :min="0"
+          :max="1000"
+          :step="10"
+          v-model="zIndex"
+          @onChange="
+            (val: number) => {
+              zIndex = val;
+            }
+          "
+        />
+      </Customize>
+
+      <p className="demo-extra-info" style="margin-top: 20px">
+        SVG filters are not fully supported on Safari. Performance may vary.
+      </p>
+
+      <PropTable :data="propData" />
+      <Dependencies :dependency-list="['gsap']" />
+    </template>
+
+    <template #code>
+      <CodeExample :code-object="blobCursor" />
+    </template>
+
+    <template #cli>
+      <CliInstallation :command="blobCursor.cli" />
+    </template>
+  </TabbedLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Dependencies from '../../components/code/Dependencies.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import { blobCursor } from '../../constants/code/Animations/blobCursorCode';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import BlobCursor from '../../content/Animations/BlobCursor/BlobCursor.vue';
+
+const blobType = ref<'circle' | 'square'>('circle');
+const fillColor = ref<string>('#27FF64');
+const trailCount = ref<number>(3);
+const sizes = ref<number[]>([60, 125, 75]);
+const innerSizes = ref<number[]>([20, 35, 25]);
+const innerColor = ref<string>('rgba(255,255,255,0.8)');
+const opacities = ref<number[]>([0.6, 0.6, 0.6]);
+const shadowColor = ref<string>('rgba(0,0,0,0.75)');
+const shadowBlur = ref<number>(5);
+const shadowOffsetX = ref<number>(10);
+const shadowOffsetY = ref<number>(10);
+const fastDuration = ref<number>(0.1);
+const slowDuration = ref<number>(0.5);
+const zIndex = ref<number>(100);
+
+const propData = [
+  { name: 'blobType', type: "'circle' | 'square'", default: "'circle'", description: 'Shape of the blobs.' },
+  { name: 'fillColor', type: 'string', default: "'#27FF64'", description: 'Background color of each blob.' },
+  { name: 'trailCount', type: 'number', default: '3', description: 'How many trailing blobs.' },
+  {
+    name: 'sizes',
+    type: 'number[]',
+    default: '[60, 125, 75]',
+    description: 'Sizes (px) of each blob. Length must be ≥ trailCount.'
+  },
+  {
+    name: 'innerSizes',
+    type: 'number[]',
+    default: '[20, 35, 25]',
+    description: 'Sizes (px) of inner dots. Length must be ≥ trailCount.'
+  },
+  {
+    name: 'innerColor',
+    type: 'string',
+    default: "'rgba(255,255,255,0.8)'",
+    description: 'Background color of the inner dot.'
+  },
+  {
+    name: 'opacities',
+    type: 'number[]',
+    default: '[0.6, 0.6, 0.6]',
+    description: 'Opacity of each blob. Length ≥ trailCount.'
+  },
+  { name: 'shadowColor', type: 'string', default: "'rgba(0,0,0,0.75)'", description: 'Box-shadow color.' },
+  { name: 'shadowBlur', type: 'number', default: '5', description: 'Box-shadow blur radius (px).' },
+  { name: 'shadowOffsetX', type: 'number', default: '10', description: 'Box-shadow X offset (px).' },
+  { name: 'shadowOffsetY', type: 'number', default: '10', description: 'Box-shadow Y offset (px).' },
+  {
+    name: 'filterId',
+    type: 'string',
+    default: "'blob'",
+    description: 'Optional custom filter ID (for multiple instances).'
+  },
+  {
+    name: 'filterStdDeviation',
+    type: 'number',
+    default: '30',
+    description: 'feGaussianBlur stdDeviation for SVG filter.'
+  },
+  {
+    name: 'filterColorMatrixValues',
+    type: 'string',
+    default: "'1 0 0 ...'",
+    description: 'feColorMatrix values for SVG filter.'
+  },
+  { name: 'useFilter', type: 'boolean', default: 'true', description: 'Enable the SVG filter.' },
+  { name: 'fastDuration', type: 'number', default: '0.1', description: 'GSAP duration for the lead blob.' },
+  { name: 'slowDuration', type: 'number', default: '0.5', description: 'GSAP duration for the following blobs.' },
+  { name: 'fastEase', type: 'string', default: "'power3.out'", description: 'GSAP ease for the lead blob.' },
+  { name: 'slowEase', type: 'string', default: "'power1.out'", description: 'GSAP ease for the following blobs.' },
+  { name: 'zIndex', type: 'number', default: '100', description: 'CSS z-index of the whole component.' }
+];
+</script>