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

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
-          title="Delay (ms)"
-          v-model="delay"
-          :min="50"
-          :max="500"
-          :step="10"
-        />
+        <PreviewSlider title="Delay (ms)" v-model="delay" :min="50" :max="500" :step="10" />
 
-        <PreviewSlider
-          title="Step Duration (s)"
-          v-model="stepDuration"
-          :min="0.1"
-          :max="1"
-          :step="0.05"
-        />
+        <PreviewSlider title="Step Duration (s)" v-model="stepDuration" :min="0.1" :max="1" :step="0.05" />
 
-        <PreviewSlider
-          title="Threshold"
-          v-model="threshold"
-          :min="0.1"
-          :max="1"
-          :step="0.1"
-        />
+        <PreviewSlider 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
-          title="Speed"
-          v-model="speed"
-          :min="0"
-          :max="10"
-          :step="0.1"
-        />
+        <PreviewSlider title="Speed" v-model="speed" :min="0" :max="10" :step="0.1" />
 
-        <PreviewSlider
-          title="Curve Amount"
-          v-model="curveAmount"
-          :min="-400"
-          :max="400"
-          :step="10"
-          value-unit="px"
-        />
+        <PreviewSlider title="Curve Amount" v-model="curveAmount" :min="-400" :max="400" :step="10" value-unit="px" />
 
-        <PreviewSwitch
-          title="Draggable"
-          :model-value="interactive"
-          @update:model-value="
-            (val: boolean) => {
-              interactive = val;
-              forceRerender();
-            }
-          "
-        />
+        <PreviewSwitch title="Draggable" v-model="interactive" />
       </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
-          title="Base Intensity"
-          v-model="baseIntensity"
-          :min="0"
-          :max="1"
-          :step="0.01"
-        />
+        <PreviewSlider title="Base Intensity" v-model="baseIntensity" :min="0" :max="1" :step="0.01" />
 
-        <PreviewSlider
-          title="Hover Intensity"
-          v-model="hoverIntensity"
-          :min="0"
-          :max="2"
-          :step="0.01"
-        />
+        <PreviewSlider title="Hover Intensity" v-model="hoverIntensity" :min="0" :max="2" :step="0.01" />
 
-        <PreviewSwitch
-          title="Enable Hover"
-          :model-value="enableHover"
-          @update:model-value="
-            (val: boolean) => {
-              enableHover = val;
-              forceRerender();
-            }
-          "
-        />
+        <PreviewSwitch title="Enable Hover" v-model="enableHover" />
       </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
-          title="Enable Hover"
-          :model-value="enableBlur"
-          @update:model-value="
-            (val: boolean) => {
-              enableBlur = val;
-              forceRerender();
-            }
-          "
-        />
+        <PreviewSwitch title="Enable Blur" v-model="enableBlur" />
         <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 = () => {
-  rerenderKey.value++;
-};
+const { rerenderKey, forceRerender } = useForceRerender();
 
 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
-          title="Follow Mouse Direction"
-          v-model="followMouseDirection"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSwitch title="Follow Mouse Direction" v-model="followMouseDirection" />
 
-        <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
-            title="Flex"
-            :model-value="flex"
-            @update:model-value="
-              (val: boolean) => {
-                flex = val;
-                forceRerender();
-              }
-            "
-          />
+          <PreviewSwitch title="Flex" v-model="flex" />
 
-          <PreviewSwitch
-            title="Alpha"
-            :model-value="alpha"
-            @update:model-value="
-              (val: boolean) => {
-                alpha = val;
-                forceRerender();
-              }
-            "
-          />
+          <PreviewSwitch title="Alpha" v-model="alpha" />
 
-          <PreviewSwitch
-            title="Stroke"
-            :model-value="stroke"
-            @update:model-value="
-              (val: boolean) => {
-                stroke = val;
-                forceRerender();
-              }
-            "
-          />
+          <PreviewSwitch title="Stroke" v-model="stroke" />
 
-          <PreviewSwitch
-            title="Width"
-            :model-value="width"
-            @update:model-value="
-              (val: boolean) => {
-                width = val;
-                forceRerender();
-              }
-            "
-          />
+          <PreviewSwitch title="Width" v-model="width" />
 
-          <PreviewSwitch
-            title="Weight"
-            :model-value="weight"
-            @update:model-value="
-              (val: boolean) => {
-                weight = val;
-                forceRerender();
-              }
-            "
-          />
+          <PreviewSwitch title="Weight" v-model="weight" />
 
-          <PreviewSwitch
-            title="Italic"
-            :model-value="italic"
-            @update:model-value="
-              (val: boolean) => {
-                italic = val;
-                forceRerender();
-              }
-            "
-          />
+          <PreviewSwitch title="Italic" v-model="italic" />
         </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);