Added defineModel support for PreviewSwitch component and fixed small bug in ScrollRevealDemo component.

src/components/common/PreviewSwitch.vue

@@ -2,11 +2,7 @@
   <div class="preview-switch">
     <span class="switch-label">{{ title }}</span>
 
-    <ToggleSwitch
+    <ToggleSwitch v-model="model" :disabled="disabled" />
-      :model-value="modelValue"
-      @update:model-value="$emit('update:modelValue', $event)"
-      :disabled="disabled"
-    />
   </div>
 </template>
 
@@ -15,13 +11,10 @@ import ToggleSwitch from 'primevue/toggleswitch';
 
 defineProps<{
   title: string;
-  modelValue: boolean;
   disabled?: boolean;
 }>();
 
-defineEmits<{
+const model = defineModel<boolean>();
-  'update:modelValue': [value: boolean];
-}>();
 </script>
 
 <style scoped>

src/demo/Animations/AnimatedContentDemo.vue

@@ -29,59 +29,21 @@
 
         <PreviewSelect title="Easing Function" v-model="ease" :options="easeOptions" />
 
-        <PreviewSlider
+        <PreviewSlider title="Distance" v-model="distance" :min="50" :max="300" :step="10" />
-          title="Distance"
-          v-model="distance"
-          :min="50"
-          :max="300"
-          :step="10"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Duration" v-model="duration" :min="0.1" :max="3" :step="0.1" value-unit="s" />
-          title="Duration"
-          v-model="duration"
-          :min="0.1"
-          :max="3"
-          :step="0.1"
-          value-unit="s"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Delay" v-model="delay" :min="0" :max="2" :step="0.1" value-unit="s" />
-          title="Delay"
-          v-model="delay"
-          :min="0"
-          :max="2"
-          :step="0.1"
-          value-unit="s"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Initial Opacity" v-model="initialOpacity" :min="0" :max="1" :step="0.1" />
-          title="Initial Opacity"
-          v-model="initialOpacity"
-          :min="0"
-          :max="1"
-          :step="0.1"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Initial Scale" v-model="scale" :min="0.1" :max="2" :step="0.1" />
-          title="Initial Scale"
-          v-model="scale"
-          :min="0.1"
-          :max="2"
-          :step="0.1"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
-          title="Threshold"
-          v-model="threshold"
-          :min="0.1"
-          :max="1"
-          :step="0.1"
-        />
 
-        <PreviewSwitch title="Reverse Direction" v-model="reverse" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Reverse Direction" v-model="reverse" />
 
-        <PreviewSwitch title="Animate Opacity" v-model="animateOpacity" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Animate Opacity" v-model="animateOpacity" />
       </Customize>
 
       <PropTable :data="propData" />

src/demo/Animations/FadeContentDemo.vue

@@ -23,39 +23,15 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Enable Blur Effect" v-model="blur" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Enable Blur Effect" v-model="blur" />
 
-        <PreviewSlider
+        <PreviewSlider title="Duration (ms)" v-model="duration" :min="100" :max="3000" :step="100" />
-          title="Duration (ms)"
-          v-model="duration"
-          :min="100"
-          :max="3000"
-          :step="100"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Delay (ms)" v-model="delay" :min="0" :max="1000" :step="50" />
-          title="Delay (ms)"
-          v-model="delay"
-          :min="0"
-          :max="1000"
-          :step="50"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
-          title="Threshold"
-          v-model="threshold"
-          :min="0.1"
-          :max="1"
-          :step="0.1"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Initial Opacity" v-model="initialOpacity" :min="0" :max="1" :step="0.1" />
-          title="Initial Opacity"
-          v-model="initialOpacity"
-          :min="0"
-          :max="1"
-          :step="0.1"
-        />
       </Customize>
 
       <PropTable :data="propData" />
@@ -72,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import RefreshButton from '../../components/common/RefreshButton.vue';
 import PropTable from '../../components/common/PropTable.vue';
@@ -107,6 +83,10 @@ const propData = [
   { name: 'initialOpacity', type: 'number', default: '0', description: 'Initial opacity before animation (0-1).' },
   { name: 'className', type: 'string', default: '""', description: 'Additional CSS classes for styling.' }
 ];
+
+watch(blur, () => {
+  forceRerender();
+});
 </script>
 
 <style scoped>

src/demo/Animations/MagnetDemo.vue

@@ -27,24 +27,11 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Disabled" v-model="disabled" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Disabled" v-model="disabled" />
 
-        <PreviewSlider
+        <PreviewSlider title="Padding" v-model="padding" :min="0" :max="300" :step="10" value-unit="px" />
-          title="Padding"
-          v-model="padding"
-          :min="0"
-          :max="300"
-          :step="10"
-          value-unit="px"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Strength" v-model="magnetStrength" :min="1" :max="10" :step="1" />
-          title="Strength"
-          v-model="magnetStrength"
-          :min="1"
-          :max="10"
-          :step="1"
-        />
       </Customize>
 
       <PropTable :data="propData" />
@@ -76,7 +63,7 @@ import { useForceRerender } from '@/composables/useForceRerender';
 const disabled = ref(false);
 const padding = ref(100);
 const magnetStrength = ref(2);
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const propData = [
   {

src/demo/Animations/MetaBallsDemo.vue

@@ -19,55 +19,19 @@
       <Customize>
         <PreviewColor title="Color" v-model="color" />
 
-        <PreviewSlider
+        <PreviewSlider title="Ball Count" :min="2" :max="30" :step="1" v-model="ballCount" />
-          title="Ball Count"
-          :min="2"
-          :max="30"
-          :step="1"
-          v-model="ballCount"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Speed" :min="0.1" :max="1" :step="0.1" v-model="speed" />
-          title="Speed"
-          :min="0.1"
-          :max="1"
-          :step="0.1"
-          v-model="speed"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Size" :min="10" :max="50" :step="1" v-model="animationSize" />
-          title="Size"
-          :min="10"
-          :max="50"
-          :step="1"
-          v-model="animationSize"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Clump Factor" :min="0.1" :max="2" :step="0.1" v-model="clumpFactor" />
-          title="Clump Factor"
-          :min="0.1"
-          :max="2"
-          :step="0.1"
-          v-model="clumpFactor"
-        />
 
-        <PreviewSwitch title="Follow Cursor" v-model="enableMouseInteraction" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Follow Cursor" v-model="enableMouseInteraction" />
 
-        <PreviewSlider
+        <PreviewSlider title="Cursor Smoothing" :min="0.001" :max="0.25" :step="0.001" v-model="hoverSmoothness" />
-          title="Cursor Smoothing"
-          :min="0.001"
-          :max="0.25"
-          :step="0.001"
-          v-model="hoverSmoothness"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Cursor Size" :min="1" :max="5" :step="1" v-model="cursorBallSize" />
-          title="Cursor Size"
-          :min="1"
-          :max="5"
-          :step="1"
-          v-model="cursorBallSize"
-        />
       </Customize>
 
       <PropTable :data="propData" />
@@ -85,7 +49,6 @@
 </template>
 
 <script setup lang="ts">
-import { useForceRerender } from '@/composables/useForceRerender';
 import { ref } from 'vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
@@ -99,8 +62,6 @@ import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import { metaBalls } from '../../constants/code/Animations/metaBallsCode';
 import MetaBalls from '../../content/Animations/MetaBalls/MetaBalls.vue';
 
-const { forceRerender } = useForceRerender();
-
 const color = ref('#27FF64');
 const speed = ref(0.3);
 const animationSize = ref(30);

src/demo/Backgrounds/IridescenceDemo.vue

@@ -14,15 +14,9 @@
 
         <PreviewSlider :min="0" :max="2" :step="0.1" v-model="speed" title="Speed" />
 
-        <PreviewSlider
+        <PreviewSlider :min="0" :max="0.5" :step="0.01" v-model="amplitude" title="Amplitude" />
-          :min="0"
-          :max="0.5"
-          :step="0.01"
-          v-model="amplitude"
-          title="Amplitude"
-        />
 
-        <PreviewSwitch v-model="mouseInteraction" title="Enable Mouse Interaction" @update:modelValue="forceRerender" />
+        <PreviewSwitch v-model="mouseInteraction" title="Enable Mouse Interaction" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -59,7 +53,7 @@ const speed = ref(1);
 const amplitude = ref(0.1);
 const mouseInteraction = ref(true);
 
-const { rerenderKey: key, forceRerender } = useForceRerender();
+const { rerenderKey: key } = useForceRerender();
 
 const propData = [
   {

src/demo/Backgrounds/LetterGlitchDemo.vue

@@ -24,19 +24,11 @@
 
           <PreviewSlider title="Glitch Speed" v-model="speed" :min="0" :max="100" :step="5" />
 
-          <PreviewSwitch title="Smooth Animation" :model-value="smooth" @update:model-value="updateSmooth" />
+          <PreviewSwitch title="Smooth Animation" v-model="smooth" />
 
-          <PreviewSwitch
+          <PreviewSwitch title="Show Center Vignette" v-model="showCenterVignette" />
-            title="Show Center Vignette"
-            :model-value="showCenterVignette"
-            @update:model-value="updateCenterVignette"
-          />
 
-          <PreviewSwitch
+          <PreviewSwitch title="Show Outer Vignette" v-model="showOuterVignette" />
-            title="Show Outer Vignette"
-            :model-value="showOuterVignette"
-            @update:model-value="updateOuterVignette"
-          />
         </Customize>
 
         <PropTable :data="propData" />
@@ -91,21 +83,6 @@ const randomizeColors = () => {
   forceRerender();
 };
 
-const updateSmooth = (value: boolean) => {
-  smooth.value = value;
-  forceRerender();
-};
-
-const updateCenterVignette = (value: boolean) => {
-  showCenterVignette.value = value;
-  forceRerender();
-};
-
-const updateOuterVignette = (value: boolean) => {
-  showOuterVignette.value = value;
-  forceRerender();
-};
-
 const propData = [
   {
     name: 'glitchColors',

src/demo/Backgrounds/ParticlesDemo.vue

@@ -30,23 +30,11 @@
 
           <PreviewSlider title="Base Size" v-model="baseSize" :min="100" :max="1000" :step="100" />
 
-          <PreviewSwitch
+          <PreviewSwitch title="Mouse Interaction" v-model="moveParticlesOnHover" />
-            title="Mouse Interaction"
-            :model-value="moveParticlesOnHover"
-            @update:model-value="moveParticlesOnHover = $event"
-          />
 
-          <PreviewSwitch
+          <PreviewSwitch title="Particle Transparency" v-model="alphaParticles" />
-            title="Particle Transparency"
-            :model-value="alphaParticles"
-            @update:model-value="alphaParticles = $event"
-          />
 
-          <PreviewSwitch
+          <PreviewSwitch title="Disable Rotation" v-model="disableRotation" />
-            title="Disable Rotation"
-            :model-value="disableRotation"
-            @update:model-value="disableRotation = $event"
-          />
         </Customize>
 
         <PropTable :data="propData" />

src/demo/Components/CardSwapDemo.vue

@@ -92,7 +92,7 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Pause On Hover" v-model="pauseOnHover" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Pause On Hover" v-model="pauseOnHover" />
 
         <PreviewSlider title="Card Distance" v-model="cardDistance" :min="30" :max="100" :step="5" />
 

src/demo/Components/CarouselDemo.vue

@@ -16,11 +16,11 @@
       <Customize>
         <PreviewSlider title="Width" v-model="width" :min="250" :max="330" :step="10" />
 
-        <PreviewSwitch title="Round Variant" v-model="round" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Round Variant" v-model="round" />
 
-        <PreviewSwitch title="Loop" v-model="loop" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Loop" v-model="loop" />
 
-        <PreviewSwitch title="Autoplay" v-model="autoplay" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Autoplay" v-model="autoplay" />
 
         <PreviewSlider
           title="Delay"
@@ -31,12 +31,7 @@
           :disabled="!autoplay"
         />
 
-        <PreviewSwitch
+        <PreviewSwitch title="Pause On Hover" v-model="pauseOnHover" :disabled="!autoplay" />
-          title="Pause On Hover"
-          v-model="pauseOnHover"
-          :disabled="!autoplay"
-          @update:model-value="forceRerender"
-        />
       </Customize>
 
       <PropTable :data="propData" />
@@ -55,7 +50,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import PropTable from '../../components/common/PropTable.vue';
 import Dependencies from '../../components/code/Dependencies.vue';
@@ -121,4 +116,11 @@ const propData = [
     description: 'When true, the carousel is rendered with a 1:1 aspect ratio and circular container/items.'
   }
 ];
+
+watch(
+  () => [pauseOnHover.value, loop.value],
+  () => {
+    forceRerender();
+  }
+);
 </script>

src/demo/Components/MasonryDemo.vue

@@ -20,11 +20,11 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Scale on Hover" v-model="scaleOnHover" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Scale on Hover" v-model="scaleOnHover" />
 
-        <PreviewSwitch title="Blur to Focus" v-model="blurToFocus" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Blur to Focus" v-model="blurToFocus" />
 
-        <PreviewSwitch title="Color Shift on Hover" v-model="colorShiftOnHover" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Color Shift on Hover" v-model="colorShiftOnHover" />
 
         <PreviewSelect
           title="Animation Direction"
@@ -62,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import RefreshButton from '../../components/common/RefreshButton.vue';
 import PropTable from '../../components/common/PropTable.vue';
@@ -142,4 +142,11 @@ const propData = [
     description: 'Whether to show color overlay on hover.'
   }
 ];
+
+watch(
+  () => [scaleOnHover.value, blurToFocus.value, colorShiftOnHover.value],
+  () => {
+    forceRerender();
+  }
+);
 </script>

src/demo/Components/ProfileCardDemo.vue

@@ -23,11 +23,11 @@
       <Customize>
         <button @click="generateRandomGradients" class="randomize-btn">Randomize Colors</button>
 
-        <PreviewSwitch title="Show Icon Pattern" v-model="showIcon" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Show Icon Pattern" v-model="showIcon" />
 
-        <PreviewSwitch title="Show User Info" v-model="showUserInfo" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Show User Info" v-model="showUserInfo" />
 
-        <PreviewSwitch title="Show BG Gradient" v-model="showBehindGradient" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Show BG Gradient" v-model="showBehindGradient" />
       </Customize>
 
       <PropTable :data="propData" />

src/demo/Components/StackDemo.vue

@@ -13,28 +13,10 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Random Rotation" v-model="randomRotation" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Random Rotation" v-model="randomRotation" />
-        <PreviewSlider
+        <PreviewSlider title="Sensitivity" v-model="sensitivity" :min="10" :max="300" :step="10" />
-          title="Sensitivity"
+        <PreviewSlider title="Card Width" v-model="cardDimensions.width" :min="10" :max="300" :step="10" />
-          v-model="sensitivity"
+        <PreviewSlider title="Card Height" v-model="cardDimensions.height" :min="10" :max="300" :step="10" />
-          :min="10"
-          :max="300"
-          :step="10"
-        />
-        <PreviewSlider
-          title="Card Width"
-          v-model="cardDimensions.width"
-          :min="10"
-          :max="300"
-          :step="10"
-        />
-        <PreviewSlider
-          title="Card Height"
-          v-model="cardDimensions.height"
-          :min="10"
-          :max="300"
-          :step="10"
-        />
       </Customize>
       <PropTable :data="propData" />
     </template>
@@ -69,7 +51,7 @@ const images = [
   { id: 4, img: 'https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format' }
 ];
 
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 const randomRotation = ref<boolean>(false);
 const sensitivity = ref<number>(200);
 const cardDimensions = ref({

src/demo/TextAnimations/BlurTextDemo.vue

@@ -23,7 +23,7 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Show Completion Toast" v-model="showCallback" />
 
         <div class="flex gap-4 flex-wrap">
           <button
@@ -43,29 +43,11 @@
           </button>
         </div>
 
-        <PreviewSlider
+        <PreviewSlider title="Delay (ms)" v-model="delay" :min="50" :max="500" :step="10" />
-          title="Delay (ms)"
-          v-model="delay"
-          :min="50"
-          :max="500"
-          :step="10"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Step Duration (s)" v-model="stepDuration" :min="0.1" :max="1" :step="0.05" />
-          title="Step Duration (s)"
-          v-model="stepDuration"
-          :min="0.1"
-          :max="1"
-          :step="0.05"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
-          title="Threshold"
-          v-model="threshold"
-          :min="0.1"
-          :max="1"
-          :step="0.1"
-        />
       </Customize>
 
       <PropTable :data="propData" />

src/demo/TextAnimations/CurvedLoopDemo.vue

@@ -24,33 +24,11 @@
           />
         </div>
 
-        <PreviewSlider
+        <PreviewSlider title="Speed" v-model="speed" :min="0" :max="10" :step="0.1" />
-          title="Speed"
-          v-model="speed"
-          :min="0"
-          :max="10"
-          :step="0.1"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Curve Amount" v-model="curveAmount" :min="-400" :max="400" :step="10" value-unit="px" />
-          title="Curve Amount"
-          v-model="curveAmount"
-          :min="-400"
-          :max="400"
-          :step="10"
-          value-unit="px"
-        />
 
-        <PreviewSwitch
+        <PreviewSwitch title="Draggable" v-model="interactive" />
-          title="Draggable"
-          :model-value="interactive"
-          @update:model-value="
-            (val: boolean) => {
-              interactive = val;
-              forceRerender();
-            }
-          "
-        />
       </Customize>
 
       <PropTable :data="propData" />

src/demo/TextAnimations/DecryptedTextDemo.vue

@@ -53,9 +53,9 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Sequential" v-model="sequential" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Sequential" v-model="sequential" />
 
-        <PreviewSwitch title="Original Chars" v-model="useOriginalCharsOnly" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Original Chars" v-model="useOriginalCharsOnly" />
 
         <PreviewSlider title="Speed" v-model="speed" :min="10" :max="200" :step="10" value-unit="ms" />
 
@@ -80,7 +80,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+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';
@@ -176,6 +176,13 @@ const propData = [
     description: 'Trigger scrambling on hover or scroll-into-view.'
   }
 ];
+
+watch(
+  () => [sequential.value, useOriginalCharsOnly.value],
+  () => {
+    forceRerender();
+  }
+);
 </script>
 
 <style scoped>

src/demo/TextAnimations/FuzzyTextDemo.vue

@@ -27,32 +27,11 @@
       </div>
 
       <Customize>
-        <PreviewSlider
+        <PreviewSlider title="Base Intensity" v-model="baseIntensity" :min="0" :max="1" :step="0.01" />
-          title="Base Intensity"
-          v-model="baseIntensity"
-          :min="0"
-          :max="1"
-          :step="0.01"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Hover Intensity" v-model="hoverIntensity" :min="0" :max="2" :step="0.01" />
-          title="Hover Intensity"
-          v-model="hoverIntensity"
-          :min="0"
-          :max="2"
-          :step="0.01"
-        />
 
-        <PreviewSwitch
+        <PreviewSwitch title="Enable Hover" v-model="enableHover" />
-          title="Enable Hover"
-          :model-value="enableHover"
-          @update:model-value="
-            (val: boolean) => {
-              enableHover = val;
-              forceRerender();
-            }
-          "
-        />
       </Customize>
 
       <PropTable :data="propData" />
@@ -85,7 +64,7 @@ const baseIntensity = ref(0.2);
 const hoverIntensity = ref(0.5);
 const enableHover = ref(true);
 
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const propData = [
   {

src/demo/TextAnimations/ScrollRevealDemo.vue

@@ -22,16 +22,7 @@
       </div>
 
       <Customize>
-        <PreviewSwitch
+        <PreviewSwitch title="Enable Blur" v-model="enableBlur" />
-          title="Enable Hover"
-          :model-value="enableBlur"
-          @update:model-value="
-            (val: boolean) => {
-              enableBlur = val;
-              forceRerender();
-            }
-          "
-        />
         <PreviewSlider title="Base Opacity:" v-model="baseOpacity" :min="0" :max="1" :step="0.1" value-unit="" />
         <PreviewSlider title="Base Rotation:" v-model="baseRotation" :min="0" :max="10" :step="0.5" value-unit="deg" />
         <PreviewSlider title="Blur Strength:" v-model="blurStrength" :min="0" :max="10" :step="0.5" value-unit="px" />
@@ -51,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 import { gsap } from 'gsap';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import PropTable from '../../components/common/PropTable.vue';
@@ -62,6 +53,7 @@ import ScrollReveal from '../../content/TextAnimations/ScrollReveal/ScrollReveal
 import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
 import { scrollRevealCode } from '@/constants/code/TextAnimations/scrollRevealCode';
+import { useForceRerender } from '@/composables/useForceRerender';
 
 const containerRef = ref<HTMLElement | null>(null);
 const scrollText = ref(
@@ -75,11 +67,8 @@ const containerClassName = ref('');
 const textClassName = ref('');
 const rotationEnd = ref('bottom bottom');
 const wordAnimationEnd = ref('bottom bottom');
-const rerenderKey = ref(0);
 
-const forceRerender = () => {
+const { rerenderKey, forceRerender } = useForceRerender();
-  rerenderKey.value++;
-};
 
 const smoothScroll = (e: WheelEvent) => {
   e.preventDefault();
@@ -110,6 +99,13 @@ onUnmounted(() => {
   }
 });
 
+watch(
+  () => enableBlur.value,
+  () => {
+    forceRerender();
+  }
+);
+
 const propData = [
   {
     name: 'children',

src/demo/TextAnimations/SplitTextDemo.vue

@@ -22,7 +22,7 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Show Completion Toast" v-model="showCallback" />
 
         <PreviewSlider title="Stagger Delay (ms)" v-model="delay" :min="10" :max="500" :step="10" />
 
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import RefreshButton from '../../components/common/RefreshButton.vue';
 import PropTable from '../../components/common/PropTable.vue';
@@ -123,4 +123,11 @@ const propData = [
     description: 'Callback function when all animations complete.'
   }
 ];
+
+watch(
+  () => showCallback.value,
+  () => {
+    forceRerender();
+  }
+);
 </script>

src/demo/TextAnimations/TextCursorDemo.vue

@@ -29,13 +29,9 @@
           />
         </div>
 
-        <PreviewSwitch
+        <PreviewSwitch title="Follow Mouse Direction" v-model="followMouseDirection" />
-          title="Follow Mouse Direction"
-          v-model="followMouseDirection"
-          @update:model-value="forceRerender"
-        />
 
-        <PreviewSwitch title="Enable Random Floating" v-model="randomFloat" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Enable Random Floating" v-model="randomFloat" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -66,7 +62,7 @@ import TextCursor from '../../content/TextAnimations/TextCursor/TextCursor.vue';
 import { textCursor } from '@/constants/code/TextAnimations/textCursorCode';
 import { useForceRerender } from '@/composables/useForceRerender';
 
-const { rerenderKey: key, forceRerender } = useForceRerender();
+const { rerenderKey: key } = useForceRerender();
 
 const text = ref('💚');
 const followMouseDirection = ref(true);

src/demo/TextAnimations/TextPressureDemo.vue

@@ -39,71 +39,17 @@
         <p class="mt-6 text-[#999] text-sm">Animation Settings</p>
 
         <div class="flex gap-4 flex-wrap">
-          <PreviewSwitch
+          <PreviewSwitch title="Flex" v-model="flex" />
-            title="Flex"
-            :model-value="flex"
-            @update:model-value="
-              (val: boolean) => {
-                flex = val;
-                forceRerender();
-              }
-            "
-          />
 
-          <PreviewSwitch
+          <PreviewSwitch title="Alpha" v-model="alpha" />
-            title="Alpha"
-            :model-value="alpha"
-            @update:model-value="
-              (val: boolean) => {
-                alpha = val;
-                forceRerender();
-              }
-            "
-          />
 
-          <PreviewSwitch
+          <PreviewSwitch title="Stroke" v-model="stroke" />
-            title="Stroke"
-            :model-value="stroke"
-            @update:model-value="
-              (val: boolean) => {
-                stroke = val;
-                forceRerender();
-              }
-            "
-          />
 
-          <PreviewSwitch
+          <PreviewSwitch title="Width" v-model="width" />
-            title="Width"
-            :model-value="width"
-            @update:model-value="
-              (val: boolean) => {
-                width = val;
-                forceRerender();
-              }
-            "
-          />
 
-          <PreviewSwitch
+          <PreviewSwitch title="Weight" v-model="weight" />
-            title="Weight"
-            :model-value="weight"
-            @update:model-value="
-              (val: boolean) => {
-                weight = val;
-                forceRerender();
-              }
-            "
-          />
 
-          <PreviewSwitch
+          <PreviewSwitch title="Italic" v-model="italic" />
-            title="Italic"
-            :model-value="italic"
-            @update:model-value="
-              (val: boolean) => {
-                italic = val;
-                forceRerender();
-              }
-            "
-          />
         </div>
       </Customize>
 
@@ -121,7 +67,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+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';
@@ -231,6 +177,13 @@ const propData = [
     description: 'Sets a minimum font-size to avoid overly tiny text on smaller screens.'
   }
 ];
+
+watch(
+  () => [flex.value, alpha.value, stroke.value, width.value, weight.value, italic.value],
+  () => {
+    forceRerender();
+  }
+);
 </script>
 
 <style scoped>

src/demo/TextAnimations/TrueFocusDemo.vue

@@ -10,7 +10,7 @@
       <Customize>
         <PreviewColor title="Corners Color" v-model="borderColor" />
 
-        <PreviewSwitch title="Hover Mode" v-model="manualMode" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Hover Mode" v-model="manualMode" />
 
         <PreviewSlider title="Blur Amount" v-model="blurAmount" :min="0" :max="15" :step="0.5" value-unit="px" />
 
@@ -65,7 +65,7 @@ import TrueFocus from '../../content/TextAnimations/TrueFocus/TrueFocus.vue';
 import { trueFocus } from '../../constants/code/TextAnimations/trueFocusCode';
 import { useForceRerender } from '@/composables/useForceRerender';
 
-const { rerenderKey: key, forceRerender } = useForceRerender();
+const { rerenderKey: key } = useForceRerender();
 
 const manualMode = ref(false);
 const blurAmount = ref(5);