Migrate <SplashCursor />

src/constants/Categories.ts

@@ -31,6 +31,7 @@ export const CATEGORIES = [
     subcategories: [
       'Animated Content',
       'Fade Content',
+      'Splash Cursor',
       'Pixel Transition',
       'Ribbons',
       'Glare Hover',

src/constants/Components.ts

@@ -9,7 +9,8 @@ const animations = {
   'metallic-paint': () => import('../demo/Animations/MetallicPaintDemo.vue'),
   'magnet': () => import('../demo/Animations/MagnetDemo.vue'),
   'cubes': () => import('../demo/Animations/CubesDemo.vue'),
-  'count-up': () => import('../demo/Animations/CountUpDemo.vue')
+  'count-up': () => import('../demo/Animations/CountUpDemo.vue'),
+  'splash-cursor': () => import('../demo/Animations/SplashCursorDemo.vue'),
 };
 
 const textAnimations = {

src/constants/code/Animations/splashCursorCode.ts

@@ -0,0 +1,29 @@
+import code from '@content/Animations/SplashCursor/SplashCursor.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const splashCursor: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/SplashCursor`,
+  usage: `<template>
+  <SplashCursor
+    :SIM_RESOLUTION="128"
+    :DYE_RESOLUTION="1440"
+    :CAPTURE_RESOLUTION="512"
+    :DENSITY_DISSIPATION="3.5"
+    :VELOCITY_DISSIPATION="2"
+    :PRESSURE="0.1"
+    :PRESSURE_ITERATIONS="20"
+    :CURL="3"
+    :SPLAT_RADIUS="0.2"
+    :SPLAT_FORCE="6000"
+    :SHADING="true"
+    :COLOR_UPDATE_SPEED="10"
+    :BACK_COLOR="{ r: 0.5, g: 0, b: 0 }"
+    :TRANSPARENT="true"
+  />
+</template>
+
+<script setup lang="ts">
+  import SplashCursor from "./SplashCursor.vue";
+</script>`,
+  code
+};

src/demo/Animations/SplashCursorDemo.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="splash-cursor-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container">
+          <span class="text-6xl text-center text-[#222] font-black select-none">Move Your Cursor</span>
+        </div>
+
+        <Customize>
+          <PreviewSlider title="Simulation Resolution" v-model="simResolution" :min="64" :max="512" :step="32" />
+
+          <PreviewSlider title="Density Dissipation" v-model="densityDissipation" :min="1" :max="10" :step="0.5" />
+
+          <PreviewSlider title="Splat Force" v-model="splatForce" :min="1000" :max="15000" :step="1000" />
+        </Customize>
+
+        <PropTable :data="propData" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="splashCursor" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="splashCursor.cli" />
+      </template>
+    </TabbedLayout>
+
+    <SplashCursor
+      :key="rerenderKey"
+      :SIM_RESOLUTION="simResolution"
+      :DENSITY_DISSIPATION="densityDissipation"
+      :SPLAT_FORCE="splatForce"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import TabbedLayout from '../../components/common/TabbedLayout.vue';
+import PropTable from '../../components/common/PropTable.vue';
+import CliInstallation from '../../components/code/CliInstallation.vue';
+import CodeExample from '../../components/code/CodeExample.vue';
+import Customize from '../../components/common/Customize.vue';
+import PreviewSlider from '../../components/common/PreviewSlider.vue';
+import SplashCursor from '../../content/Animations/SplashCursor/SplashCursor.vue';
+import { splashCursor } from '@/constants/code/Animations/splashCursorCode';
+import { useForceRerender } from '@/composables/useForceRerender';
+
+const { rerenderKey, forceRerender } = useForceRerender();
+
+const simResolution = ref(128);
+const densityDissipation = ref(3.5);
+const splatForce = ref(6000);
+
+watch([simResolution, densityDissipation, splatForce], () => {
+  forceRerender();
+});
+
+const propData = [
+  {
+    name: 'SIM_RESOLUTION',
+    type: 'number',
+    default: '128',
+    description: 'Fluid simulation resolution for velocity fields.'
+  },
+  {
+    name: 'DYE_RESOLUTION',
+    type: 'number',
+    default: '1440',
+    description: 'Resolution of the color/dye texture.'
+  },
+  {
+    name: 'CAPTURE_RESOLUTION',
+    type: 'number',
+    default: '512',
+    description: 'Resolution used for certain capture operations (rarely changed).'
+  },
+  {
+    name: 'DENSITY_DISSIPATION',
+    type: 'number',
+    default: '3.5',
+    description: 'Rate at which color/density dissipates over time.'
+  },
+  {
+    name: 'VELOCITY_DISSIPATION',
+    type: 'number',
+    default: '2',
+    description: 'Rate at which velocity dissipates over time.'
+  },
+  {
+    name: 'PRESSURE',
+    type: 'number',
+    default: '0.1',
+    description: 'Base pressure for the fluid simulation.'
+  },
+  {
+    name: 'PRESSURE_ITERATIONS',
+    type: 'number',
+    default: '20',
+    description: 'Number of Jacobi iterations used for the pressure solver.'
+  },
+  {
+    name: 'CURL',
+    type: 'number',
+    default: '3',
+    description: 'Amount of vorticity/curl to apply for swirling effects.'
+  },
+  {
+    name: 'SPLAT_RADIUS',
+    type: 'number',
+    default: '0.2',
+    description: "Radius of the 'splat' effect when user interacts."
+  },
+  {
+    name: 'SPLAT_FORCE',
+    type: 'number',
+    default: '6000',
+    description: "Force of the fluid 'splat' on each interaction."
+  },
+  {
+    name: 'SHADING',
+    type: 'boolean',
+    default: 'true',
+    description: 'Toggles simple lighting/shading on the fluid.'
+  },
+  {
+    name: 'COLOR_UPDATE_SPEED',
+    type: 'number',
+    default: '10',
+    description: 'Frequency at which pointer colors are re-randomized.'
+  },
+  {
+    name: 'BACK_COLOR',
+    type: 'object',
+    default: '{ r: 0.5, g: 0, b: 0 }',
+    description: 'Base background color for the fluid. Not always used if TRANSPARENT is true.'
+  },
+  {
+    name: 'TRANSPARENT',
+    type: 'boolean',
+    default: 'true',
+    description: 'Determines if the canvas background should be rendered with alpha.'
+  }
+];
+</script>
+
+<style scoped>
+.demo-container {
+  overflow: hidden;
+  min-height: 300px;
+  padding: 0;
+}
+</style>