From dbe11acf9b1f6f16692569b383b0ee5eb22cc686 Mon Sep 17 00:00:00 2001
From: snepsnepy <snepysneptest@gmail.com>
Date: Tue, 15 Jul 2025 14:46:30 +0300
Subject: [PATCH 1/8] Added defineModel support for PreviewColor component.
 Updated watch in TrueFocus component.

---
 src/components/common/PreviewColor.vue           | 16 ++++------------
 .../TextAnimations/TrueFocus/TrueFocus.vue       |  4 ++--
 src/demo/Animations/BlobCursorDemo.vue           |  9 +++------
 src/demo/Animations/ClickSparkDemo.vue           |  2 +-
 src/demo/Animations/MetaBallsDemo.vue            |  2 +-
 src/demo/Animations/PixelTransitionDemo.vue      |  2 +-
 src/demo/Backgrounds/AuroraDemo.vue              |  7 +------
 src/demo/Backgrounds/BalatroDemo.vue             |  9 ++-------
 src/demo/Backgrounds/BeamsDemo.vue               |  2 +-
 src/demo/Backgrounds/DotGridDemo.vue             |  4 ++--
 src/demo/Backgrounds/ParticlesDemo.vue           |  9 ++-------
 src/demo/Backgrounds/SilkDemo.vue                |  2 +-
 src/demo/Backgrounds/WavesDemo.vue               |  2 +-
 src/demo/Components/CircularGalleryDemo.vue      |  2 +-
 src/demo/TextAnimations/TextPressureDemo.vue     |  4 ++--
 src/demo/TextAnimations/TrueFocusDemo.vue        |  2 +-
 16 files changed, 26 insertions(+), 52 deletions(-)

diff --git a/src/components/common/PreviewColor.vue b/src/components/common/PreviewColor.vue
index 20a8e60..a715f71 100644
--- a/src/components/common/PreviewColor.vue
+++ b/src/components/common/PreviewColor.vue
@@ -1,24 +1,16 @@
 <template>
   <div class="preview-color">
     <span class="color-label">{{ title }}</span>
-    <input :value="modelValue" @input="handleColorChange" type="color" :disabled="disabled" class="color-input" />
+    <input :value="color" @input="handleColorChange" type="color" :disabled="props.disabled" class="color-input" />
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
-  title: string;
-  modelValue: string;
-  disabled?: boolean;
-}>();
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string];
-}>();
+const props = defineProps<{ title: string; disabled?: boolean }>();
+const color = defineModel<string>();
 
 const handleColorChange = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  emit('update:modelValue', target.value);
+  color.value = (event.target as HTMLInputElement).value;
 };
 </script>
 
diff --git a/src/content/TextAnimations/TrueFocus/TrueFocus.vue b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
index 6e1acfd..d03d667 100644
--- a/src/content/TextAnimations/TrueFocus/TrueFocus.vue
+++ b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
@@ -32,7 +32,7 @@ const focusRect = ref({ x: 0, y: 0, width: 0, height: 0 });
 let interval: number | null = null;
 
 watch(
-  [() => props.manualMode, () => props.animationDuration, () => props.pauseBetweenAnimations, words],
+  [() => props.manualMode, () => props.animationDuration, () => props.pauseBetweenAnimations, () => words.value],
   () => {
     if (interval) {
       clearInterval(interval);
@@ -52,7 +52,7 @@ watch(
 );
 
 watch(
-  [currentIndex, words.value.length],
+  [currentIndex, () => words.value.length],
   async () => {
     if (currentIndex.value === null || currentIndex.value === -1) return;
     if (!wordRefs.value[currentIndex.value] || !containerRef.value) return;
diff --git a/src/demo/Animations/BlobCursorDemo.vue b/src/demo/Animations/BlobCursorDemo.vue
index a051f78..9862a93 100644
--- a/src/demo/Animations/BlobCursorDemo.vue
+++ b/src/demo/Animations/BlobCursorDemo.vue
@@ -33,9 +33,9 @@
           <span class="ml-1 text-gray-400">{{ blobType }}</span>
         </button>
 
-        <PreviewColor title="Fill Color" v-model="fillColor" @update:model-value="forceRerender" />
-        <PreviewColor title="Inner Color" v-model="innerColor" @update:model-value="forceRerender" />
-        <PreviewColor title="Shadow Color" v-model="shadowColor" @update:model-value="forceRerender" />
+        <PreviewColor title="Fill Color" v-model="fillColor" />
+        <PreviewColor title="Inner Color" v-model="innerColor" />
+        <PreviewColor title="Shadow Color" v-model="shadowColor" />
 
         <PreviewSlider
           title="Trail Count"
@@ -214,9 +214,6 @@ import Customize from '../../components/common/Customize.vue';
 import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import PreviewColor from '../../components/common/PreviewColor.vue';
 import BlobCursor from '../../content/Animations/BlobCursor/BlobCursor.vue';
-import { useForceRerender } from '@/composables/useForceRerender';
-
-const { forceRerender } = useForceRerender();
 
 const blobType = ref<'circle' | 'square'>('circle');
 const fillColor = ref<string>('#27FF64');
diff --git a/src/demo/Animations/ClickSparkDemo.vue b/src/demo/Animations/ClickSparkDemo.vue
index 4990dde..429d355 100644
--- a/src/demo/Animations/ClickSparkDemo.vue
+++ b/src/demo/Animations/ClickSparkDemo.vue
@@ -22,7 +22,7 @@
       </div>
 
       <Customize>
-        <PreviewColor title="Spark Color" v-model="sparkColor" @update:model-value="forceRerender" />
+        <PreviewColor title="Spark Color" v-model="sparkColor" />
 
         <PreviewSlider
           title="Spark Size"
diff --git a/src/demo/Animations/MetaBallsDemo.vue b/src/demo/Animations/MetaBallsDemo.vue
index d547fcf..971878c 100644
--- a/src/demo/Animations/MetaBallsDemo.vue
+++ b/src/demo/Animations/MetaBallsDemo.vue
@@ -17,7 +17,7 @@
       </div>
 
       <Customize>
-        <PreviewColor title="Color" v-model="color" @update:model-value="forceRerender" />
+        <PreviewColor title="Color" v-model="color" />
 
         <PreviewSlider
           title="Ball Count"
diff --git a/src/demo/Animations/PixelTransitionDemo.vue b/src/demo/Animations/PixelTransitionDemo.vue
index a83125e..cc402cf 100644
--- a/src/demo/Animations/PixelTransitionDemo.vue
+++ b/src/demo/Animations/PixelTransitionDemo.vue
@@ -49,7 +49,7 @@
           width="200"
         />
 
-        <PreviewColor title="Pixel Color" v-model="pixelColor" @update:model-value="forceRerender" />
+        <PreviewColor title="Pixel Color" v-model="pixelColor" />
       </Customize>
 
       <PropTable :data="propData" />
diff --git a/src/demo/Backgrounds/AuroraDemo.vue b/src/demo/Backgrounds/AuroraDemo.vue
index 1473adb..341b3ec 100644
--- a/src/demo/Backgrounds/AuroraDemo.vue
+++ b/src/demo/Backgrounds/AuroraDemo.vue
@@ -22,8 +22,7 @@
                 v-for="(color, index) in colorStops"
                 :key="index"
                 :title="`Color ${index + 1}`"
-                :model-value="color"
-                @update:model-value="value => updateColorStop(index, value)"
+                v-model="colorStops[index]"
               />
             </div>
           </div>
@@ -100,10 +99,6 @@ const blend = ref(0.5);
 const speed = ref(1.0);
 const intensity = ref(1.0);
 
-const updateColorStop = (index: number, color: string) => {
-  colorStops.value[index] = color;
-};
-
 const propData = [
   {
     name: 'colorStops',
diff --git a/src/demo/Backgrounds/BalatroDemo.vue b/src/demo/Backgrounds/BalatroDemo.vue
index b0de718..905029d 100644
--- a/src/demo/Backgrounds/BalatroDemo.vue
+++ b/src/demo/Backgrounds/BalatroDemo.vue
@@ -16,11 +16,10 @@
       <Customize>
         <div class="flex gap-4">
           <PreviewColor
-            v-for="(color, index) in colorStops"
+            v-for="(_, index) in colorStops"
             :key="index"
             :title="`Color ${index + 1}`"
-            :model-value="color"
-            @update:model-value="value => updateColorStop(index, value)"
+            v-model="colorStops[index]"
           />
         </div>
 
@@ -64,10 +63,6 @@ const pixelation = ref(745);
 const mouseInteractionEnabled = ref(true);
 const rotate = ref(false);
 
-const updateColorStop = (index: number, color: string) => {
-  colorStops.value[index] = color;
-};
-
 const propData = [
   {
     name: 'spinRotation',
diff --git a/src/demo/Backgrounds/BeamsDemo.vue b/src/demo/Backgrounds/BeamsDemo.vue
index 02d65be..7c4d40f 100644
--- a/src/demo/Backgrounds/BeamsDemo.vue
+++ b/src/demo/Backgrounds/BeamsDemo.vue
@@ -16,7 +16,7 @@
         </div>
 
         <Customize>
-          <PreviewColor title="Color" :model-value="lightColor" @update:model-value="lightColor = $event" />
+          <PreviewColor title="Color" v-model="lightColor" />
 
           <PreviewSlider
             title="Beam Width"
diff --git a/src/demo/Backgrounds/DotGridDemo.vue b/src/demo/Backgrounds/DotGridDemo.vue
index 680b673..bb6e60e 100644
--- a/src/demo/Backgrounds/DotGridDemo.vue
+++ b/src/demo/Backgrounds/DotGridDemo.vue
@@ -22,9 +22,9 @@
 
         <Customize>
           <div class="color-controls">
-            <PreviewColor title="Base Color" v-model="baseColor" @update:model-value="forceRerender" />
+            <PreviewColor title="Base Color" v-model="baseColor" />
 
-            <PreviewColor title="Active Color" v-model="activeColor" @update:model-value="forceRerender" />
+            <PreviewColor title="Active Color" v-model="activeColor" />
           </div>
 
           <PreviewSlider
diff --git a/src/demo/Backgrounds/ParticlesDemo.vue b/src/demo/Backgrounds/ParticlesDemo.vue
index 6e84cb3..326ba93 100644
--- a/src/demo/Backgrounds/ParticlesDemo.vue
+++ b/src/demo/Backgrounds/ParticlesDemo.vue
@@ -19,7 +19,7 @@
 
         <Customize>
           <div class="flex gap-4 items-center">
-            <PreviewColor title="Color" :model-value="color" @update:model-value="updateColor" />
+            <PreviewColor title="Color" v-model="color" />
           </div>
 
           <PreviewSlider
@@ -117,12 +117,7 @@ const moveParticlesOnHover = ref(true);
 const alphaParticles = ref(false);
 const disableRotation = ref(false);
 
-const { rerenderKey, forceRerender } = useForceRerender();
-
-const updateColor = (value: string) => {
-  color.value = value;
-  forceRerender();
-};
+const { rerenderKey } = useForceRerender();
 
 const propData = [
   { name: 'particleCount', type: 'number', default: '200', description: 'The number of particles to generate.' },
diff --git a/src/demo/Backgrounds/SilkDemo.vue b/src/demo/Backgrounds/SilkDemo.vue
index e37a294..9b0d1e2 100644
--- a/src/demo/Backgrounds/SilkDemo.vue
+++ b/src/demo/Backgrounds/SilkDemo.vue
@@ -50,7 +50,7 @@
             :step="0.1"
           />
 
-          <PreviewColor title="Color" :model-value="color" @update:model-value="color = $event" />
+          <PreviewColor title="Color" v-model="color" />
         </Customize>
 
         <PropTable :data="propData" />
diff --git a/src/demo/Backgrounds/WavesDemo.vue b/src/demo/Backgrounds/WavesDemo.vue
index 02cb723..e15f4ff 100644
--- a/src/demo/Backgrounds/WavesDemo.vue
+++ b/src/demo/Backgrounds/WavesDemo.vue
@@ -17,7 +17,7 @@
           />
 
           <div class="flex gap-4 items-center">
-            <PreviewColor title="Waves Color" :model-value="color" @update:model-value="color = $event" />
+            <PreviewColor title="Waves Color" v-model="color" />
           </div>
         </Customize>
 
diff --git a/src/demo/Components/CircularGalleryDemo.vue b/src/demo/Components/CircularGalleryDemo.vue
index a4d9245..6dde412 100644
--- a/src/demo/Components/CircularGalleryDemo.vue
+++ b/src/demo/Components/CircularGalleryDemo.vue
@@ -50,7 +50,7 @@
           @update:model-value="forceRerender"
         />
 
-        <PreviewColor title="Text Color" v-model="textColor" @update:model-value="forceRerender" />
+        <PreviewColor title="Text Color" v-model="textColor" />
 
         <PreviewSelect title="Font" v-model="font" :options="fontOptions" @update:model-value="forceRerender" />
       </Customize>
diff --git a/src/demo/TextAnimations/TextPressureDemo.vue b/src/demo/TextAnimations/TextPressureDemo.vue
index 441eb52..909c147 100644
--- a/src/demo/TextAnimations/TextPressureDemo.vue
+++ b/src/demo/TextAnimations/TextPressureDemo.vue
@@ -31,9 +31,9 @@
         </div>
 
         <div class="color-controls">
-          <PreviewColor title="Text Color" v-model="textColor" @update:model-value="forceRerender" />
+          <PreviewColor title="Text Color" v-model="textColor" />
 
-          <PreviewColor title="Stroke Color" v-model="strokeColor" @update:model-value="forceRerender" />
+          <PreviewColor title="Stroke Color" v-model="strokeColor" />
         </div>
 
         <p class="mt-6 text-[#999] text-sm">Animation Settings</p>
diff --git a/src/demo/TextAnimations/TrueFocusDemo.vue b/src/demo/TextAnimations/TrueFocusDemo.vue
index 2e6aeec..466d03a 100644
--- a/src/demo/TextAnimations/TrueFocusDemo.vue
+++ b/src/demo/TextAnimations/TrueFocusDemo.vue
@@ -8,7 +8,7 @@
       </div>
 
       <Customize>
-        <PreviewColor title="Corners Color" v-model="borderColor" @update:model-value="forceRerender" />
+        <PreviewColor title="Corners Color" v-model="borderColor" />
 
         <PreviewSwitch title="Hover Mode" v-model="manualMode" @update:model-value="forceRerender" />
 

From 183a81ae884d6c0ecd66061875390eb3dae42b5b Mon Sep 17 00:00:00 2001
From: snepsnepy <snepysneptest@gmail.com>
Date: Tue, 15 Jul 2025 16:07:55 +0300
Subject: [PATCH 2/8] Added defineModel support for PreviewSelect component

---
 src/components/common/PreviewSelect.vue       | 12 ++------
 src/demo/Animations/AnimatedContentDemo.vue   | 30 +++++--------------
 src/demo/Components/CircularGalleryDemo.vue   |  2 +-
 src/demo/Components/MasonryDemo.vue           |  1 -
 src/demo/Components/PixelCardDemo.vue         |  9 ++----
 src/demo/TextAnimations/DecryptedTextDemo.vue | 24 ++-------------
 src/demo/TextAnimations/FallingTextDemo.vue   |  7 +----
 7 files changed, 15 insertions(+), 70 deletions(-)

diff --git a/src/components/common/PreviewSelect.vue b/src/components/common/PreviewSelect.vue
index b28d086..506a704 100644
--- a/src/components/common/PreviewSelect.vue
+++ b/src/components/common/PreviewSelect.vue
@@ -3,8 +3,7 @@
     <span class="select-label">{{ title }}</span>
 
     <Select
-      :model-value="modelValue"
-      @update:model-value="handleSelectChange"
+      v-model="model"
       :options="options"
       v-bind="selectAttributes"
       :placeholder="placeholder"
@@ -25,7 +24,6 @@ interface Option {
 
 const props = defineProps<{
   title: string;
-  modelValue: string | number;
   options: Option[] | string[] | number[];
   optionLabel?: string;
   optionValue?: string;
@@ -33,13 +31,7 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits<{
-  'update:modelValue': [value: string | number];
-}>();
-
-const handleSelectChange = (value: string | number) => {
-  emit('update:modelValue', value);
-};
+const model = defineModel<string | number>();
 
 const isObjectArray = computed(() => {
   return props.options.length > 0 && typeof props.options[0] === 'object';
diff --git a/src/demo/Animations/AnimatedContentDemo.vue b/src/demo/Animations/AnimatedContentDemo.vue
index bf827ef..b59d078 100644
--- a/src/demo/Animations/AnimatedContentDemo.vue
+++ b/src/demo/Animations/AnimatedContentDemo.vue
@@ -25,29 +25,9 @@
       </div>
 
       <Customize>
-        <PreviewSelect
-          title="Animation Direction"
-          v-model="direction"
-          :options="directionOptions"
-          @update:model-value="
-            val => {
-              direction = val as 'vertical' | 'horizontal';
-              forceRerender();
-            }
-          "
-        />
+        <PreviewSelect title="Animation Direction" v-model="direction" :options="directionOptions" />
 
-        <PreviewSelect
-          title="Easing Function"
-          v-model="ease"
-          :options="easeOptions"
-          @update:model-value="
-            val => {
-              ease = val as string;
-              forceRerender();
-            }
-          "
-        />
+        <PreviewSelect title="Easing Function" v-model="ease" :options="easeOptions" />
 
         <PreviewSlider
           title="Distance"
@@ -126,7 +106,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';
@@ -233,6 +213,10 @@ const propData = [
     description: 'Additional CSS classes for styling.'
   }
 ];
+
+watch([direction, ease], () => {
+  forceRerender();
+});
 </script>
 
 <style scoped>
diff --git a/src/demo/Components/CircularGalleryDemo.vue b/src/demo/Components/CircularGalleryDemo.vue
index 6dde412..1f2ea1f 100644
--- a/src/demo/Components/CircularGalleryDemo.vue
+++ b/src/demo/Components/CircularGalleryDemo.vue
@@ -52,7 +52,7 @@
 
         <PreviewColor title="Text Color" v-model="textColor" />
 
-        <PreviewSelect title="Font" v-model="font" :options="fontOptions" @update:model-value="forceRerender" />
+        <PreviewSelect title="Font" v-model="font" :options="fontOptions" />
       </Customize>
 
       <PropTable :data="propData" />
diff --git a/src/demo/Components/MasonryDemo.vue b/src/demo/Components/MasonryDemo.vue
index ccd2290..b1bdbc4 100644
--- a/src/demo/Components/MasonryDemo.vue
+++ b/src/demo/Components/MasonryDemo.vue
@@ -37,7 +37,6 @@
             { label: 'Center', value: 'center' },
             { label: 'Random', value: 'random' }
           ]"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
diff --git a/src/demo/Components/PixelCardDemo.vue b/src/demo/Components/PixelCardDemo.vue
index 3dc0d51..5eb80c9 100644
--- a/src/demo/Components/PixelCardDemo.vue
+++ b/src/demo/Components/PixelCardDemo.vue
@@ -10,12 +10,7 @@
       </div>
 
       <Customize>
-        <PreviewSelect
-          title="Animation Variant"
-          :options="variantOptions"
-          v-model="selectedVariant"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSelect title="Animation Variant" :options="variantOptions" v-model="selectedVariant" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -44,7 +39,7 @@ import { pixelCard } from '@/constants/code/Components/pixelCardCode';
 import { useForceRerender } from '@/composables/useForceRerender';
 
 const selectedVariant = ref<'default' | 'blue' | 'yellow' | 'pink'>('default');
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const variantOptions = [
   { value: 'default', label: 'Default' },
diff --git a/src/demo/TextAnimations/DecryptedTextDemo.vue b/src/demo/TextAnimations/DecryptedTextDemo.vue
index d5c7eb2..753ff55 100644
--- a/src/demo/TextAnimations/DecryptedTextDemo.vue
+++ b/src/demo/TextAnimations/DecryptedTextDemo.vue
@@ -76,29 +76,9 @@
           @update:model-value="forceRerender"
         />
 
-        <PreviewSelect
-          title="Animation Trigger"
-          v-model="animateOn"
-          :options="animateOptions"
-          @update:model-value="
-            val => {
-              animateOn = val as 'view' | 'hover';
-              forceRerender();
-            }
-          "
-        />
+        <PreviewSelect title="Animation Trigger" v-model="animateOn" :options="animateOptions" />
 
-        <PreviewSelect
-          title="Animation Direction"
-          v-model="revealDirection"
-          :options="directionOptions"
-          @update:model-value="
-            val => {
-              revealDirection = val as 'start' | 'end' | 'center';
-              forceRerender();
-            }
-          "
-        />
+        <PreviewSelect title="Animation Direction" v-model="revealDirection" :options="directionOptions" />
       </Customize>
 
       <PropTable :data="propData" />
diff --git a/src/demo/TextAnimations/FallingTextDemo.vue b/src/demo/TextAnimations/FallingTextDemo.vue
index 2dfb07f..0436b56 100644
--- a/src/demo/TextAnimations/FallingTextDemo.vue
+++ b/src/demo/TextAnimations/FallingTextDemo.vue
@@ -18,12 +18,7 @@
       </div>
 
       <Customize>
-        <PreviewSelect
-          title="Animation Trigger"
-          v-model="trigger"
-          :options="triggerOptions"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSelect title="Animation Trigger" v-model="trigger" :options="triggerOptions" />
 
         <PreviewSlider
           title="Gravity"

From 53b8e674b5046709b57aa2122cea1a9e8c9b1182 Mon Sep 17 00:00:00 2001
From: snepsnepy <snepysneptest@gmail.com>
Date: Tue, 15 Jul 2025 17:05:43 +0300
Subject: [PATCH 3/8] Added defineModel support for PreviewSlider component.

---
 src/components/common/PreviewSlider.vue       | 20 +---
 src/demo/Animations/AnimatedContentDemo.vue   |  6 --
 src/demo/Animations/BlobCursorDemo.vue        | 93 ++-----------------
 src/demo/Animations/ClickSparkDemo.vue        | 47 ++--------
 src/demo/Animations/FadeContentDemo.vue       |  4 -
 src/demo/Animations/MagnetDemo.vue            |  2 -
 src/demo/Animations/MetaBallsDemo.vue         | 30 ------
 src/demo/Animations/MetallicPaintDemo.vue     |  5 -
 src/demo/Animations/PixelTransitionDemo.vue   | 13 +--
 src/demo/Backgrounds/AuroraDemo.vue           | 36 +------
 src/demo/Backgrounds/BeamsDemo.vue            | 63 ++-----------
 src/demo/Backgrounds/DotGridDemo.vue          | 76 ++-------------
 src/demo/Backgrounds/IridescenceDemo.vue      |  3 +-
 src/demo/Backgrounds/LetterGlitchDemo.vue     |  9 +-
 src/demo/Backgrounds/LightningDemo.vue        | 45 +--------
 src/demo/Backgrounds/ParticlesDemo.vue        | 36 +------
 src/demo/Backgrounds/SilkDemo.vue             | 12 +--
 src/demo/Backgrounds/WavesDemo.vue            |  3 +-
 src/demo/Components/CarouselDemo.vue          | 10 +-
 src/demo/Components/CircularGalleryDemo.vue   | 38 +-------
 src/demo/Components/DockDemo.vue              | 48 ++--------
 src/demo/Components/FlyingPostersDemo.vue     | 56 ++---------
 src/demo/Components/GooeyNavDemo.vue          | 29 +-----
 src/demo/Components/MasonryDemo.vue           | 27 +-----
 src/demo/Components/StackDemo.vue             |  3 -
 src/demo/TextAnimations/AsciiTextDemo.vue     |  5 +-
 src/demo/TextAnimations/BlurTextDemo.vue      |  3 -
 src/demo/TextAnimations/CircularTextDemo.vue  |  9 +-
 src/demo/TextAnimations/CurvedLoopDemo.vue    |  2 -
 src/demo/TextAnimations/DecryptedTextDemo.vue | 21 +----
 src/demo/TextAnimations/FallingTextDemo.vue   | 12 +--
 src/demo/TextAnimations/FuzzyTextDemo.vue     |  2 -
 src/demo/TextAnimations/SplitTextDemo.vue     | 27 +-----
 src/demo/TextAnimations/TextTrailDemo.vue     | 40 ++------
 src/demo/TextAnimations/TrueFocusDemo.vue     | 12 +--
 35 files changed, 98 insertions(+), 749 deletions(-)

diff --git a/src/components/common/PreviewSlider.vue b/src/components/common/PreviewSlider.vue
index 6692928..ae4b5ca 100644
--- a/src/components/common/PreviewSlider.vue
+++ b/src/components/common/PreviewSlider.vue
@@ -2,15 +2,7 @@
   <div class="preview-slider">
     <span class="slider-label">{{ title }}</span>
 
-    <Slider
-      :model-value="modelValue"
-      @update:model-value="handleSliderChange"
-      :min="min"
-      :max="max"
-      :step="step"
-      :disabled="disabled"
-      class="custom-slider"
-    />
+    <Slider v-model="model" :min="min" :max="max" :step="step" :disabled="disabled" class="custom-slider" />
 
     <span class="slider-value">{{ modelValue }}{{ valueUnit }}</span>
   </div>
@@ -21,7 +13,6 @@ import Slider from 'primevue/slider';
 
 defineProps<{
   title: string;
-  modelValue: number;
   min?: number;
   max?: number;
   step?: number;
@@ -29,14 +20,7 @@ defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits<{
-  'update:modelValue': [value: number];
-}>();
-
-const handleSliderChange = (value: number | number[]) => {
-  const numValue = Array.isArray(value) ? value[0] : value;
-  emit('update:modelValue', numValue);
-};
+const model = defineModel<number>();
 </script>
 
 <style scoped>
diff --git a/src/demo/Animations/AnimatedContentDemo.vue b/src/demo/Animations/AnimatedContentDemo.vue
index b59d078..cfaa567 100644
--- a/src/demo/Animations/AnimatedContentDemo.vue
+++ b/src/demo/Animations/AnimatedContentDemo.vue
@@ -35,7 +35,6 @@
           :min="50"
           :max="300"
           :step="10"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -45,7 +44,6 @@
           :max="3"
           :step="0.1"
           value-unit="s"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -55,7 +53,6 @@
           :max="2"
           :step="0.1"
           value-unit="s"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -64,7 +61,6 @@
           :min="0"
           :max="1"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -73,7 +69,6 @@
           :min="0.1"
           :max="2"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -82,7 +77,6 @@
           :min="0.1"
           :max="1"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSwitch title="Reverse Direction" v-model="reverse" @update:model-value="forceRerender" />
diff --git a/src/demo/Animations/BlobCursorDemo.vue b/src/demo/Animations/BlobCursorDemo.vue
index 9862a93..dfb6cc8 100644
--- a/src/demo/Animations/BlobCursorDemo.vue
+++ b/src/demo/Animations/BlobCursorDemo.vue
@@ -68,11 +68,6 @@
           :max="200"
           :step="1"
           v-model="sizes[0]"
-          @onChange="
-            (val: number) => {
-              sizes[0] = val;
-            }
-          "
           :isDisabled="trailCount < 1"
         />
 
@@ -82,11 +77,6 @@
           :max="100"
           :step="1"
           v-model="innerSizes[0]"
-          @onChange="
-            (val: number) => {
-              innerSizes[0] = val;
-            }
-          "
           :isDisabled="trailCount < 1"
         />
 
@@ -96,91 +86,20 @@
           :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 Blur" :min="0" :max="50" :step="1" v-model="shadowBlur" />
 
-        <PreviewSlider
-          title="Shadow Offset X"
-          :min="-50"
-          :max="50"
-          :step="1"
-          v-model="shadowOffsetX"
-          @onChange="
-            (val: number) => {
-              shadowOffsetX = val;
-            }
-          "
-        />
+        <PreviewSlider title="Shadow Offset X" :min="-50" :max="50" :step="1" v-model="shadowOffsetX" />
 
-        <PreviewSlider
-          title="Shadow Offset Y"
-          :min="-50"
-          :max="50"
-          :step="1"
-          v-model="shadowOffsetY"
-          @onChange="
-            (val: number) => {
-              shadowOffsetY = val;
-            }
-          "
-        />
+        <PreviewSlider title="Shadow Offset Y" :min="-50" :max="50" :step="1" v-model="shadowOffsetY" />
 
-        <PreviewSlider
-          title="Fast Duration (Lead)"
-          :min="0.01"
-          :max="2"
-          :step="0.01"
-          v-model="fastDuration"
-          @onChange="
-            (val: number) => {
-              fastDuration = val;
-            }
-          "
-        />
+        <PreviewSlider title="Fast Duration (Lead)" :min="0.01" :max="2" :step="0.01" v-model="fastDuration" />
 
-        <PreviewSlider
-          title="Slow Duration (Trail)"
-          :min="0.01"
-          :max="3"
-          :step="0.01"
-          v-model="slowDuration"
-          @onChange="
-            (val: number) => {
-              slowDuration = val;
-            }
-          "
-        />
+        <PreviewSlider title="Slow Duration (Trail)" :min="0.01" :max="3" :step="0.01" v-model="slowDuration" />
 
-        <PreviewSlider
-          title="Z-Index"
-          :min="0"
-          :max="1000"
-          :step="10"
-          v-model="zIndex"
-          @onChange="
-            (val: number) => {
-              zIndex = val;
-            }
-          "
-        />
+        <PreviewSlider title="Z-Index" :min="0" :max="1000" :step="10" v-model="zIndex" />
       </Customize>
 
       <p class="flex items-center gap-[0.5em] mx-0 my-[1em] text-[#a1a1aa]">
diff --git a/src/demo/Animations/ClickSparkDemo.vue b/src/demo/Animations/ClickSparkDemo.vue
index 429d355..64bceac 100644
--- a/src/demo/Animations/ClickSparkDemo.vue
+++ b/src/demo/Animations/ClickSparkDemo.vue
@@ -24,50 +24,15 @@
       <Customize>
         <PreviewColor title="Spark Color" v-model="sparkColor" />
 
-        <PreviewSlider
-          title="Spark Size"
-          v-model="sparkSize"
-          :min="5"
-          :max="30"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Spark Size" v-model="sparkSize" :min="5" :max="30" :step="1" />
 
-        <PreviewSlider
-          title="Spark Radius"
-          v-model="sparkRadius"
-          :min="10"
-          :max="50"
-          :step="5"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Spark Radius" v-model="sparkRadius" :min="10" :max="50" :step="5" />
 
-        <PreviewSlider
-          title="Spark Count"
-          v-model="sparkCount"
-          :min="4"
-          :max="20"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Spark Count" v-model="sparkCount" :min="4" :max="20" :step="1" />
 
-        <PreviewSlider
-          title="Duration (ms)"
-          v-model="duration"
-          :min="200"
-          :max="1000"
-          :step="50"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Duration (ms)" v-model="duration" :min="200" :max="1000" :step="50" />
 
-        <PreviewSlider
-          title="Extra Scale"
-          v-model="extraScale"
-          :min="0.5"
-          :max="2"
-          :step="0.1"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Extra Scale" v-model="extraScale" :min="0.5" :max="2" :step="0.1" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -103,7 +68,7 @@ const sparkCount = ref(8);
 const duration = ref(400);
 const easing = ref<'linear' | 'ease-in' | 'ease-out' | 'ease-in-out'>('ease-out');
 const extraScale = ref(1);
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const propData = [
   { name: 'sparkColor', type: 'string', default: "'#fff'", description: 'Color of the spark lines.' },
diff --git a/src/demo/Animations/FadeContentDemo.vue b/src/demo/Animations/FadeContentDemo.vue
index b7fa5ac..3b9709e 100644
--- a/src/demo/Animations/FadeContentDemo.vue
+++ b/src/demo/Animations/FadeContentDemo.vue
@@ -31,7 +31,6 @@
           :min="100"
           :max="3000"
           :step="100"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -40,7 +39,6 @@
           :min="0"
           :max="1000"
           :step="50"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -49,7 +47,6 @@
           :min="0.1"
           :max="1"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -58,7 +55,6 @@
           :min="0"
           :max="1"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
       </Customize>
 
diff --git a/src/demo/Animations/MagnetDemo.vue b/src/demo/Animations/MagnetDemo.vue
index cef343f..b0948fa 100644
--- a/src/demo/Animations/MagnetDemo.vue
+++ b/src/demo/Animations/MagnetDemo.vue
@@ -36,7 +36,6 @@
           :max="300"
           :step="10"
           value-unit="px"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -45,7 +44,6 @@
           :min="1"
           :max="10"
           :step="1"
-          @update:model-value="forceRerender"
         />
       </Customize>
 
diff --git a/src/demo/Animations/MetaBallsDemo.vue b/src/demo/Animations/MetaBallsDemo.vue
index 971878c..ec01d1a 100644
--- a/src/demo/Animations/MetaBallsDemo.vue
+++ b/src/demo/Animations/MetaBallsDemo.vue
@@ -25,11 +25,6 @@
           :max="30"
           :step="1"
           v-model="ballCount"
-          @onChange="
-            (val: number) => {
-              ballCount = val;
-            }
-          "
         />
 
         <PreviewSlider
@@ -38,11 +33,6 @@
           :max="1"
           :step="0.1"
           v-model="speed"
-          @onChange="
-            (val: number) => {
-              speed = val;
-            }
-          "
         />
 
         <PreviewSlider
@@ -51,11 +41,6 @@
           :max="50"
           :step="1"
           v-model="animationSize"
-          @onChange="
-            (val: number) => {
-              animationSize = val;
-            }
-          "
         />
 
         <PreviewSlider
@@ -64,11 +49,6 @@
           :max="2"
           :step="0.1"
           v-model="clumpFactor"
-          @onChange="
-            (val: number) => {
-              clumpFactor = val;
-            }
-          "
         />
 
         <PreviewSwitch title="Follow Cursor" v-model="enableMouseInteraction" @update:model-value="forceRerender" />
@@ -79,11 +59,6 @@
           :max="0.25"
           :step="0.001"
           v-model="hoverSmoothness"
-          @onChange="
-            (val: number) => {
-              hoverSmoothness = val;
-            }
-          "
         />
 
         <PreviewSlider
@@ -92,11 +67,6 @@
           :max="5"
           :step="1"
           v-model="cursorBallSize"
-          @onChange="
-            (val: number) => {
-              cursorBallSize = val;
-            }
-          "
         />
       </Customize>
 
diff --git a/src/demo/Animations/MetallicPaintDemo.vue b/src/demo/Animations/MetallicPaintDemo.vue
index 5d73edb..158c290 100644
--- a/src/demo/Animations/MetallicPaintDemo.vue
+++ b/src/demo/Animations/MetallicPaintDemo.vue
@@ -26,7 +26,6 @@
           :min="1"
           :max="5"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -35,7 +34,6 @@
           :min="0"
           :max="0.1"
           :step="0.001"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -44,7 +42,6 @@
           :min="0"
           :max="0.1"
           :step="0.01"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -53,7 +50,6 @@
           :min="0"
           :max="1"
           :step="0.01"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -62,7 +58,6 @@
           :min="0"
           :max="1"
           :step="0.01"
-          @update:model-value="forceRerender"
         />
       </Customize>
 
diff --git a/src/demo/Animations/PixelTransitionDemo.vue b/src/demo/Animations/PixelTransitionDemo.vue
index cc402cf..ad29428 100644
--- a/src/demo/Animations/PixelTransitionDemo.vue
+++ b/src/demo/Animations/PixelTransitionDemo.vue
@@ -28,15 +28,7 @@
       </div>
 
       <Customize>
-        <PreviewSlider
-          title="Grid Size"
-          v-model="gridSize"
-          :min="2"
-          :max="50"
-          :step="1"
-          @update:model-value="forceRerender"
-          width="200"
-        />
+        <PreviewSlider title="Grid Size" v-model="gridSize" :min="2" :max="50" :step="1" width="200" />
 
         <PreviewSlider
           title="Animation Duration"
@@ -45,7 +37,6 @@
           :max="2"
           :step="0.1"
           value-unit="s"
-          @update:model-value="forceRerender"
           width="200"
         />
 
@@ -81,7 +72,7 @@ import { pixelTransition } from '@/constants/code/Animations/pixelTransitionCode
 import { useForceRerender } from '@/composables/useForceRerender';
 import PreviewColor from '../../components/common/PreviewColor.vue';
 
-const { rerenderKey: key, forceRerender } = useForceRerender();
+const { rerenderKey: key } = useForceRerender();
 const gridSize = ref(8);
 const pixelColor = ref('#ffffff');
 const animationStepDuration = ref(0.4);
diff --git a/src/demo/Backgrounds/AuroraDemo.vue b/src/demo/Backgrounds/AuroraDemo.vue
index 341b3ec..5397fd5 100644
--- a/src/demo/Backgrounds/AuroraDemo.vue
+++ b/src/demo/Backgrounds/AuroraDemo.vue
@@ -27,41 +27,13 @@
             </div>
           </div>
 
-          <PreviewSlider
-            title="Amplitude"
-            :model-value="amplitude"
-            @update:model-value="amplitude = $event"
-            :min="0"
-            :max="2"
-            :step="0.1"
-          />
+          <PreviewSlider title="Amplitude" v-model="amplitude" :min="0" :max="2" :step="0.1" />
 
-          <PreviewSlider
-            title="Blend"
-            :model-value="blend"
-            @update:model-value="blend = $event"
-            :min="0"
-            :max="1"
-            :step="0.1"
-          />
+          <PreviewSlider title="Blend" v-model="blend" :min="0" :max="1" :step="0.1" />
 
-          <PreviewSlider
-            title="Speed"
-            :model-value="speed"
-            @update:model-value="speed = $event"
-            :min="0"
-            :max="3"
-            :step="0.1"
-          />
+          <PreviewSlider title="Speed" v-model="speed" :min="0" :max="3" :step="0.1" />
 
-          <PreviewSlider
-            title="Intensity"
-            :model-value="intensity"
-            @update:model-value="intensity = $event"
-            :min="0"
-            :max="2"
-            :step="0.1"
-          />
+          <PreviewSlider title="Intensity" v-model="intensity" :min="0" :max="2" :step="0.1" />
         </Customize>
 
         <PropTable :data="propData" />
diff --git a/src/demo/Backgrounds/BeamsDemo.vue b/src/demo/Backgrounds/BeamsDemo.vue
index 7c4d40f..adaaa4a 100644
--- a/src/demo/Backgrounds/BeamsDemo.vue
+++ b/src/demo/Backgrounds/BeamsDemo.vue
@@ -18,68 +18,19 @@
         <Customize>
           <PreviewColor title="Color" v-model="lightColor" />
 
-          <PreviewSlider
-            title="Beam Width"
-            :model-value="beamWidth"
-            @update:model-value="beamWidth = $event"
-            :min="0.1"
-            :max="10"
-            :step="0.1"
-          />
+          <PreviewSlider title="Beam Width" v-model="beamWidth" :min="0.1" :max="10" :step="0.1" />
 
-          <PreviewSlider
-            title="Beam Height"
-            :model-value="beamHeight"
-            @update:model-value="beamHeight = $event"
-            :min="1"
-            :max="25"
-            :step="1"
-          />
+          <PreviewSlider title="Beam Height" v-model="beamHeight" :min="1" :max="25" :step="1" />
 
-          <PreviewSlider
-            title="Beam Count"
-            :model-value="beamNumber"
-            @update:model-value="beamNumber = $event"
-            :min="1"
-            :max="50"
-            :step="1"
-          />
+          <PreviewSlider title="Beam Count" v-model="beamNumber" :min="1" :max="50" :step="1" />
 
-          <PreviewSlider
-            title="Speed"
-            :model-value="speed"
-            @update:model-value="speed = $event"
-            :min="0.1"
-            :max="10"
-            :step="0.1"
-          />
+          <PreviewSlider title="Speed" v-model="speed" :min="0.1" :max="10" :step="0.1" />
 
-          <PreviewSlider
-            title="Noise Intensity"
-            :model-value="noiseIntensity"
-            @update:model-value="noiseIntensity = $event"
-            :min="0"
-            :max="5"
-            :step="0.05"
-          />
+          <PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="5" :step="0.05" />
 
-          <PreviewSlider
-            title="Noise Scale"
-            :model-value="scale"
-            @update:model-value="scale = $event"
-            :min="0.01"
-            :max="1"
-            :step="0.01"
-          />
+          <PreviewSlider title="Noise Scale" v-model="scale" :min="0.01" :max="1" :step="0.01" />
 
-          <PreviewSlider
-            title="Rotation"
-            :model-value="rotation"
-            @update:model-value="rotation = $event"
-            :min="0"
-            :max="360"
-            :step="1"
-          />
+          <PreviewSlider title="Rotation" v-model="rotation" :min="0" :max="360" :step="1" />
         </Customize>
 
         <PropTable :data="propData" />
diff --git a/src/demo/Backgrounds/DotGridDemo.vue b/src/demo/Backgrounds/DotGridDemo.vue
index bb6e60e..8ffa255 100644
--- a/src/demo/Backgrounds/DotGridDemo.vue
+++ b/src/demo/Backgrounds/DotGridDemo.vue
@@ -27,79 +27,23 @@
             <PreviewColor title="Active Color" v-model="activeColor" />
           </div>
 
-          <PreviewSlider
-            title="Dot Size"
-            v-model="dotSize"
-            :min="2"
-            :max="50"
-            :step="1"
-            @update:model-value="forceRerender"
-          />
+          <PreviewSlider title="Dot Size" v-model="dotSize" :min="2" :max="50" :step="1" />
 
-          <PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" @update:model-value="forceRerender" />
+          <PreviewSlider title="Gap" v-model="gap" :min="5" :max="100" :step="1" />
 
-          <PreviewSlider
-            title="Proximity"
-            v-model="proximity"
-            :min="50"
-            :max="500"
-            :step="10"
-            @update:model-value="forceRerender"
-          />
+          <PreviewSlider title="Proximity" v-model="proximity" :min="50" :max="500" :step="10" />
 
-          <PreviewSlider
-            title="Speed Trigger"
-            v-model="speedTrigger"
-            :min="50"
-            :max="500"
-            :step="10"
-            @update:model-value="forceRerender"
-          />
+          <PreviewSlider title="Speed Trigger" v-model="speedTrigger" :min="50" :max="500" :step="10" />
 
-          <PreviewSlider
-            title="Shock Radius"
-            v-model="shockRadius"
-            :min="50"
-            :max="500"
-            :step="10"
-            @update:model-value="forceRerender"
-          />
+          <PreviewSlider title="Shock Radius" v-model="shockRadius" :min="50" :max="500" :step="10" />
 
-          <PreviewSlider
-            title="Shock Strength"
-            v-model="shockStrength"
-            :min="1"
-            :max="20"
-            :step="1"
-            @update:model-value="forceRerender"
-          />
+          <PreviewSlider title="Shock Strength" v-model="shockStrength" :min="1" :max="20" :step="1" />
 
-          <PreviewSlider
-            title="Max Speed"
-            v-model="maxSpeed"
-            :min="1000"
-            :max="10000"
-            :step="100"
-            @update:model-value="forceRerender"
-          />
+          <PreviewSlider title="Max Speed" v-model="maxSpeed" :min="1000" :max="10000" :step="100" />
 
-          <PreviewSlider
-            title="Resistance (Inertia)"
-            v-model="resistance"
-            :min="100"
-            :max="2000"
-            :step="50"
-            @update:model-value="forceRerender"
-          />
+          <PreviewSlider title="Resistance (Inertia)" v-model="resistance" :min="100" :max="2000" :step="50" />
 
-          <PreviewSlider
-            title="Return Duration (Inertia)"
-            v-model="returnDuration"
-            :min="0.1"
-            :max="5"
-            :step="0.1"
-            @update:model-value="forceRerender"
-          />
+          <PreviewSlider title="Return Duration (Inertia)" v-model="returnDuration" :min="0.1" :max="5" :step="0.1" />
         </Customize>
 
         <PropTable :data="propData" />
@@ -143,7 +87,7 @@ const shockStrength = ref(5);
 const maxSpeed = ref(5000);
 const resistance = ref(750);
 const returnDuration = ref(1.5);
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const propData = [
   { name: 'dotSize', type: 'number', default: '16', description: 'Size of each dot in pixels.' },
diff --git a/src/demo/Backgrounds/IridescenceDemo.vue b/src/demo/Backgrounds/IridescenceDemo.vue
index 80f1b38..d5fc3bc 100644
--- a/src/demo/Backgrounds/IridescenceDemo.vue
+++ b/src/demo/Backgrounds/IridescenceDemo.vue
@@ -12,7 +12,7 @@
 
         <PreviewSlider :min="0" :max="1" :step="0.1" v-model="colors[2]" title="Blue" />
 
-        <PreviewSlider :min="0" :max="2" :step="0.1" v-model="speed" title="Speed" @update:modelValue="forceRerender" />
+        <PreviewSlider :min="0" :max="2" :step="0.1" v-model="speed" title="Speed"  />
 
         <PreviewSlider
           :min="0"
@@ -20,7 +20,6 @@
           :step="0.01"
           v-model="amplitude"
           title="Amplitude"
-          @update:modelValue="forceRerender"
         />
 
         <PreviewSwitch v-model="mouseInteraction" title="Enable Mouse Interaction" @update:modelValue="forceRerender" />
diff --git a/src/demo/Backgrounds/LetterGlitchDemo.vue b/src/demo/Backgrounds/LetterGlitchDemo.vue
index 4a7e225..c0c91ec 100644
--- a/src/demo/Backgrounds/LetterGlitchDemo.vue
+++ b/src/demo/Backgrounds/LetterGlitchDemo.vue
@@ -22,14 +22,7 @@
             Randomize Colors
           </button>
 
-          <PreviewSlider
-            title="Glitch Speed"
-            :model-value="speed"
-            @update:model-value="speed = $event"
-            :min="0"
-            :max="100"
-            :step="5"
-          />
+          <PreviewSlider title="Glitch Speed" v-model="speed" :min="0" :max="100" :step="5" />
 
           <PreviewSwitch title="Smooth Animation" :model-value="smooth" @update:model-value="updateSmooth" />
 
diff --git a/src/demo/Backgrounds/LightningDemo.vue b/src/demo/Backgrounds/LightningDemo.vue
index f4fe2aa..73310ac 100644
--- a/src/demo/Backgrounds/LightningDemo.vue
+++ b/src/demo/Backgrounds/LightningDemo.vue
@@ -14,50 +14,15 @@
         </div>
 
         <Customize>
-          <PreviewSlider
-            title="Hue"
-            :model-value="hue"
-            @update:model-value="hue = $event"
-            :min="0"
-            :max="360"
-            :step="1"
-          />
+          <PreviewSlider title="Hue" v-model="hue" :min="0" :max="360" :step="1" />
 
-          <PreviewSlider
-            title="X Offset"
-            :model-value="xOffset"
-            @update:model-value="xOffset = $event"
-            :min="-2"
-            :max="2"
-            :step="0.1"
-          />
+          <PreviewSlider title="X Offset" v-model="xOffset" :min="-2" :max="2" :step="0.1" />
 
-          <PreviewSlider
-            title="Speed"
-            :model-value="speed"
-            @update:model-value="speed = $event"
-            :min="0.5"
-            :max="2"
-            :step="0.1"
-          />
+          <PreviewSlider title="Speed" v-model="speed" :min="0.5" :max="2" :step="0.1" />
 
-          <PreviewSlider
-            title="Intensity"
-            :model-value="intensity"
-            @update:model-value="intensity = $event"
-            :min="0.1"
-            :max="2"
-            :step="0.1"
-          />
+          <PreviewSlider title="Intensity" v-model="intensity" :min="0.1" :max="2" :step="0.1" />
 
-          <PreviewSlider
-            title="Size"
-            :model-value="size"
-            @update:model-value="size = $event"
-            :min="0.1"
-            :max="3"
-            :step="0.1"
-          />
+          <PreviewSlider title="Size" v-model="size" :min="0.1" :max="3" :step="0.1" />
         </Customize>
 
         <PropTable :data="propData" />
diff --git a/src/demo/Backgrounds/ParticlesDemo.vue b/src/demo/Backgrounds/ParticlesDemo.vue
index 326ba93..2ef66bc 100644
--- a/src/demo/Backgrounds/ParticlesDemo.vue
+++ b/src/demo/Backgrounds/ParticlesDemo.vue
@@ -22,41 +22,13 @@
             <PreviewColor title="Color" v-model="color" />
           </div>
 
-          <PreviewSlider
-            title="Count"
-            :model-value="particleCount"
-            @update:model-value="particleCount = $event"
-            :min="100"
-            :max="1000"
-            :step="100"
-          />
+          <PreviewSlider title="Count" v-model="particleCount" :min="100" :max="1000" :step="100" />
 
-          <PreviewSlider
-            title="Spread"
-            :model-value="particleSpread"
-            @update:model-value="particleSpread = $event"
-            :min="10"
-            :max="100"
-            :step="10"
-          />
+          <PreviewSlider title="Spread" v-model="particleSpread" :min="10" :max="100" :step="10" />
 
-          <PreviewSlider
-            title="Speed"
-            :model-value="speed"
-            @update:model-value="speed = $event"
-            :min="0"
-            :max="2"
-            :step="0.1"
-          />
+          <PreviewSlider title="Speed" v-model="speed" :min="0" :max="2" :step="0.1" />
 
-          <PreviewSlider
-            title="Base Size"
-            :model-value="baseSize"
-            @update:model-value="baseSize = $event"
-            :min="100"
-            :max="1000"
-            :step="100"
-          />
+          <PreviewSlider title="Base Size" v-model="baseSize" :min="100" :max="1000" :step="100" />
 
           <PreviewSwitch
             title="Mouse Interaction"
diff --git a/src/demo/Backgrounds/SilkDemo.vue b/src/demo/Backgrounds/SilkDemo.vue
index 9b0d1e2..b3e5f0d 100644
--- a/src/demo/Backgrounds/SilkDemo.vue
+++ b/src/demo/Backgrounds/SilkDemo.vue
@@ -16,8 +16,7 @@
         <Customize>
           <PreviewSlider
             title="Speed"
-            :model-value="speed"
-            @update:model-value="speed = $event"
+            v-model="speed"
             :min="0"
             :max="10"
             :step="0.1"
@@ -25,8 +24,7 @@
 
           <PreviewSlider
             title="Scale"
-            :model-value="scale"
-            @update:model-value="scale = $event"
+            v-model="scale"
             :min="0.1"
             :max="3"
             :step="0.1"
@@ -34,8 +32,7 @@
 
           <PreviewSlider
             title="Noise Intensity"
-            :model-value="noiseIntensity"
-            @update:model-value="noiseIntensity = $event"
+            v-model="noiseIntensity"
             :min="0"
             :max="3"
             :step="0.1"
@@ -43,8 +40,7 @@
 
           <PreviewSlider
             title="Rotation"
-            :model-value="rotation"
-            @update:model-value="rotation = $event"
+            v-model="rotation"
             :min="0"
             :max="6.28"
             :step="0.1"
diff --git a/src/demo/Backgrounds/WavesDemo.vue b/src/demo/Backgrounds/WavesDemo.vue
index e15f4ff..534c45d 100644
--- a/src/demo/Backgrounds/WavesDemo.vue
+++ b/src/demo/Backgrounds/WavesDemo.vue
@@ -9,8 +9,7 @@
         <Customize>
           <PreviewSlider
             title="Wave Speed X"
-            :model-value="waveSpeedX"
-            @update:model-value="waveSpeedX = $event"
+            v-model="waveSpeedX"
             :min="0"
             :max="0.1"
             :step="0.01"
diff --git a/src/demo/Components/CarouselDemo.vue b/src/demo/Components/CarouselDemo.vue
index 590c158..bc18b25 100644
--- a/src/demo/Components/CarouselDemo.vue
+++ b/src/demo/Components/CarouselDemo.vue
@@ -14,14 +14,7 @@
       </div>
 
       <Customize>
-        <PreviewSlider
-          title="Width"
-          v-model="width"
-          :min="250"
-          :max="330"
-          :step="10"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Width" v-model="width" :min="250" :max="330" :step="10" />
 
         <PreviewSwitch title="Round Variant" v-model="round" @update:model-value="forceRerender" />
 
@@ -36,7 +29,6 @@
           :max="4000"
           :step="1000"
           :disabled="!autoplay"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSwitch
diff --git a/src/demo/Components/CircularGalleryDemo.vue b/src/demo/Components/CircularGalleryDemo.vue
index 1f2ea1f..422ff3d 100644
--- a/src/demo/Components/CircularGalleryDemo.vue
+++ b/src/demo/Components/CircularGalleryDemo.vue
@@ -14,41 +14,13 @@
       </div>
 
       <Customize>
-        <PreviewSlider
-          title="Bend Level"
-          v-model="bend"
-          :min="-10"
-          :max="10"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Bend Level" v-model="bend" :min="-10" :max="10" :step="1" />
 
-        <PreviewSlider
-          title="Border Radius"
-          v-model="borderRadius"
-          :min="0"
-          :max="0.5"
-          :step="0.01"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Border Radius" v-model="borderRadius" :min="0" :max="0.5" :step="0.01" />
 
-        <PreviewSlider
-          title="Scroll Speed"
-          v-model="scrollSpeed"
-          :min="0.5"
-          :max="5"
-          :step="0.1"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Scroll Speed" v-model="scrollSpeed" :min="0.5" :max="5" :step="0.1" />
 
-        <PreviewSlider
-          title="Scroll Ease"
-          v-model="scrollEase"
-          :min="0.01"
-          :max="0.15"
-          :step="0.01"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Scroll Ease" v-model="scrollEase" :min="0.01" :max="0.15" :step="0.01" />
 
         <PreviewColor title="Text Color" v-model="textColor" />
 
@@ -92,7 +64,7 @@ const scrollEase = ref(0.05);
 const textColor = ref('#ffffff');
 const font = ref('bold 30px Figtree');
 
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const fontOptions = [
   { label: 'Figtree Bold', value: 'bold 30px Figtree' },
diff --git a/src/demo/Components/DockDemo.vue b/src/demo/Components/DockDemo.vue
index cfc2c06..8ae7d4c 100644
--- a/src/demo/Components/DockDemo.vue
+++ b/src/demo/Components/DockDemo.vue
@@ -21,47 +21,11 @@
       </div>
 
       <Customize>
-        <PreviewSlider
-          title="Background Height"
-          :min="30"
-          :max="200"
-          :step="10"
-          :model-value="panelHeight"
-          @update:model-value="
-            (val: number) => {
-              panelHeight = val;
-              forceRerender();
-            }
-          "
-        />
+        <PreviewSlider title="Background Height" :min="100" :max="200" :step="10" v-model="panelHeight" />
 
-        <PreviewSlider
-          title="Item Size"
-          :min="20"
-          :max="60"
-          :step="10"
-          :model-value="baseItemSize"
-          @update:model-value="
-            (val: number) => {
-              baseItemSize = val;
-              forceRerender();
-            }
-          "
-        />
+        <PreviewSlider title="Base Item Size" :min="40" :max="100" :step="5" v-model="baseItemSize" />
 
-        <PreviewSlider
-          title="Magnification"
-          :min="50"
-          :max="100"
-          :step="10"
-          :model-value="magnification"
-          @update:model-value="
-            (val: number) => {
-              magnification = val;
-              forceRerender();
-            }
-          "
-        />
+        <PreviewSlider title="Magnification" :min="50" :max="100" :step="10" v-model="magnification" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -80,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, h } from 'vue';
+import { ref, h, watch } from 'vue';
 import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import PropTable from '../../components/common/PropTable.vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
@@ -100,6 +64,10 @@ const magnification = ref(70);
 const toast = useToast();
 const { rerenderKey, forceRerender } = useForceRerender();
 
+watch([magnification, panelHeight, baseItemSize], () => {
+  forceRerender();
+});
+
 const HomeIcon = () => h('i', { class: 'pi pi-home', style: { fontSize: '18px', color: 'white' } });
 const ArchiveIcon = () => h('i', { class: 'pi pi-inbox', style: { fontSize: '18px', color: 'white' } });
 const ProfileIcon = () => h('i', { class: 'pi pi-user', style: { fontSize: '18px', color: 'white' } });
diff --git a/src/demo/Components/FlyingPostersDemo.vue b/src/demo/Components/FlyingPostersDemo.vue
index 9dafd70..7544d66 100644
--- a/src/demo/Components/FlyingPostersDemo.vue
+++ b/src/demo/Components/FlyingPostersDemo.vue
@@ -22,59 +22,17 @@
       </div>
 
       <Customize>
-        <PreviewSlider
-          title="Plane Width"
-          v-model="planeWidth"
-          :min="200"
-          :max="400"
-          :step="20"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Plane Width" v-model="planeWidth" :min="200" :max="400" :step="20" />
 
-        <PreviewSlider
-          title="Plane Height"
-          v-model="planeHeight"
-          :min="200"
-          :max="400"
-          :step="20"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Plane Height" v-model="planeHeight" :min="200" :max="400" :step="20" />
 
-        <PreviewSlider
-          title="Distortion"
-          v-model="distortion"
-          :min="0"
-          :max="10"
-          :step="0.5"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Distortion" v-model="distortion" :min="0" :max="10" :step="0.5" />
 
-        <PreviewSlider
-          title="Scroll Ease"
-          v-model="scrollEase"
-          :min="0.005"
-          :max="0.05"
-          :step="0.005"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Scroll Ease" v-model="scrollEase" :min="0.005" :max="0.05" :step="0.005" />
 
-        <PreviewSlider
-          title="Camera FOV"
-          v-model="cameraFov"
-          :min="30"
-          :max="90"
-          :step="5"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Camera FOV" v-model="cameraFov" :min="30" :max="90" :step="5" />
 
-        <PreviewSlider
-          title="Camera Z"
-          v-model="cameraZ"
-          :min="10"
-          :max="40"
-          :step="2"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Camera Z" v-model="cameraZ" :min="10" :max="40" :step="2" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -112,7 +70,7 @@ const scrollEase = ref(0.01);
 const cameraFov = ref(45);
 const cameraZ = ref(20);
 
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const items = ref([
   'https://picsum.photos/800/800?grayscale&random=1',
diff --git a/src/demo/Components/GooeyNavDemo.vue b/src/demo/Components/GooeyNavDemo.vue
index 36cf7cd..cf5fba5 100644
--- a/src/demo/Components/GooeyNavDemo.vue
+++ b/src/demo/Components/GooeyNavDemo.vue
@@ -18,32 +18,11 @@
       </div>
 
       <Customize>
-        <PreviewSlider
-          title="Particle Count"
-          v-model="particleCount"
-          :min="1"
-          :max="50"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Particle Count" v-model="particleCount" :min="1" :max="50" :step="1" />
 
-        <PreviewSlider
-          title="Animation Variance"
-          v-model="timeVariance"
-          :min="0"
-          :max="2000"
-          :step="100"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Animation Variance" v-model="timeVariance" :min="0" :max="2000" :step="100" />
 
-        <PreviewSlider
-          title="Radius Factor"
-          v-model="particleR"
-          :min="0"
-          :max="1000"
-          :step="100"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Radius Factor" v-model="particleR" :min="0" :max="1000" :step="100" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -74,7 +53,7 @@ import { useForceRerender } from '@/composables/useForceRerender';
 const particleCount = ref(15);
 const timeVariance = ref(300);
 const particleR = ref(100);
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const navItems = [
   { label: 'Home', href: null },
diff --git a/src/demo/Components/MasonryDemo.vue b/src/demo/Components/MasonryDemo.vue
index b1bdbc4..2103737 100644
--- a/src/demo/Components/MasonryDemo.vue
+++ b/src/demo/Components/MasonryDemo.vue
@@ -39,32 +39,11 @@
           ]"
         />
 
-        <PreviewSlider
-          title="Duration (s)"
-          v-model="duration"
-          :min="0.1"
-          :max="2"
-          :step="0.1"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="2" :step="0.1" />
 
-        <PreviewSlider
-          title="Stagger Delay (s)"
-          v-model="stagger"
-          :min="0.01"
-          :max="0.2"
-          :step="0.01"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Stagger Delay (s)" v-model="stagger" :min="0.01" :max="0.2" :step="0.01" />
 
-        <PreviewSlider
-          title="Hover Scale"
-          v-model="hoverScale"
-          :min="0.8"
-          :max="1.2"
-          :step="0.05"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Hover Scale" v-model="hoverScale" :min="0.8" :max="1.2" :step="0.05" />
       </Customize>
 
       <PropTable :data="propData" />
diff --git a/src/demo/Components/StackDemo.vue b/src/demo/Components/StackDemo.vue
index f3b763a..b8e132b 100644
--- a/src/demo/Components/StackDemo.vue
+++ b/src/demo/Components/StackDemo.vue
@@ -20,7 +20,6 @@
           :min="10"
           :max="300"
           :step="10"
-          @update:model-value="forceRerender"
         />
         <PreviewSlider
           title="Card Width"
@@ -28,7 +27,6 @@
           :min="10"
           :max="300"
           :step="10"
-          @update:model-value="forceRerender"
         />
         <PreviewSlider
           title="Card Height"
@@ -36,7 +34,6 @@
           :min="10"
           :max="300"
           :step="10"
-          @update:model-value="forceRerender"
         />
       </Customize>
       <PropTable :data="propData" />
diff --git a/src/demo/TextAnimations/AsciiTextDemo.vue b/src/demo/TextAnimations/AsciiTextDemo.vue
index a52e9b8..571e7f6 100644
--- a/src/demo/TextAnimations/AsciiTextDemo.vue
+++ b/src/demo/TextAnimations/AsciiTextDemo.vue
@@ -22,7 +22,6 @@
           :min="2"
           :max="20"
           :step="1"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -31,7 +30,6 @@
           :min="100"
           :max="400"
           :step="25"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -40,10 +38,9 @@
           :min="4"
           :max="16"
           :step="1"
-          @update:model-value="forceRerender"
         />
 
-        <PreviewSwitch title="Enable Waves" v-model="enableWaves" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Enable Waves" v-model="enableWaves" />
 
         <div class="flex gap-2 flex-wrap">
           <button
diff --git a/src/demo/TextAnimations/BlurTextDemo.vue b/src/demo/TextAnimations/BlurTextDemo.vue
index 168e13a..ded99b1 100644
--- a/src/demo/TextAnimations/BlurTextDemo.vue
+++ b/src/demo/TextAnimations/BlurTextDemo.vue
@@ -49,7 +49,6 @@
           :min="50"
           :max="500"
           :step="10"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -58,7 +57,6 @@
           :min="0.1"
           :max="1"
           :step="0.05"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -67,7 +65,6 @@
           :min="0.1"
           :max="1"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
       </Customize>
 
diff --git a/src/demo/TextAnimations/CircularTextDemo.vue b/src/demo/TextAnimations/CircularTextDemo.vue
index 195bb97..5119bac 100644
--- a/src/demo/TextAnimations/CircularTextDemo.vue
+++ b/src/demo/TextAnimations/CircularTextDemo.vue
@@ -22,14 +22,7 @@
           </button>
         </div>
 
-        <PreviewSlider
-          title="Spin Duration (s)"
-          v-model="spinDuration"
-          :min="1"
-          :max="50"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Spin Duration (s)" v-model="spinDuration" :min="1" :max="50" :step="1" />
       </Customize>
 
       <PropTable :data="propData" />
diff --git a/src/demo/TextAnimations/CurvedLoopDemo.vue b/src/demo/TextAnimations/CurvedLoopDemo.vue
index e83dd96..12656d8 100644
--- a/src/demo/TextAnimations/CurvedLoopDemo.vue
+++ b/src/demo/TextAnimations/CurvedLoopDemo.vue
@@ -30,7 +30,6 @@
           :min="0"
           :max="10"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -40,7 +39,6 @@
           :max="400"
           :step="10"
           value-unit="px"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSwitch
diff --git a/src/demo/TextAnimations/DecryptedTextDemo.vue b/src/demo/TextAnimations/DecryptedTextDemo.vue
index 753ff55..e129111 100644
--- a/src/demo/TextAnimations/DecryptedTextDemo.vue
+++ b/src/demo/TextAnimations/DecryptedTextDemo.vue
@@ -57,24 +57,9 @@
 
         <PreviewSwitch title="Original Chars" v-model="useOriginalCharsOnly" @update:model-value="forceRerender" />
 
-        <PreviewSlider
-          title="Speed"
-          v-model="speed"
-          :min="10"
-          :max="200"
-          :step="10"
-          value-unit="ms"
-          @update:model-value="forceRerender"
-        />
-
-        <PreviewSlider
-          title="Iterations"
-          v-model="maxIterations"
-          :min="1"
-          :max="50"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Speed" v-model="speed" :min="10" :max="200" :step="10" value-unit="ms" />
+
+        <PreviewSlider title="Iterations" v-model="maxIterations" :min="1" :max="50" :step="1" />
 
         <PreviewSelect title="Animation Trigger" v-model="animateOn" :options="animateOptions" />
 
diff --git a/src/demo/TextAnimations/FallingTextDemo.vue b/src/demo/TextAnimations/FallingTextDemo.vue
index 0436b56..bd2bcf7 100644
--- a/src/demo/TextAnimations/FallingTextDemo.vue
+++ b/src/demo/TextAnimations/FallingTextDemo.vue
@@ -20,14 +20,7 @@
       <Customize>
         <PreviewSelect title="Animation Trigger" v-model="trigger" :options="triggerOptions" />
 
-        <PreviewSlider
-          title="Gravity"
-          v-model="gravity"
-          :min="0.1"
-          :max="2"
-          :step="0.01"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Gravity" v-model="gravity" :min="0.1" :max="2" :step="0.01" />
 
         <PreviewSlider
           title="Mouse Constraint Stiffness"
@@ -35,7 +28,6 @@
           :min="0.1"
           :max="2"
           :step="0.1"
-          @update:model-value="forceRerender"
         />
       </Customize>
 
@@ -68,7 +60,7 @@ import FallingText from '../../content/TextAnimations/FallingText/FallingText.vu
 import { fallingText } from '@/constants/code/TextAnimations/fallingTextCode';
 import { useForceRerender } from '@/composables/useForceRerender';
 
-const { rerenderKey: key, forceRerender } = useForceRerender();
+const { rerenderKey: key } = useForceRerender();
 
 const gravity = ref(0.56);
 const mouseConstraintStiffness = ref(0.9);
diff --git a/src/demo/TextAnimations/FuzzyTextDemo.vue b/src/demo/TextAnimations/FuzzyTextDemo.vue
index 5ee549a..a05a141 100644
--- a/src/demo/TextAnimations/FuzzyTextDemo.vue
+++ b/src/demo/TextAnimations/FuzzyTextDemo.vue
@@ -33,7 +33,6 @@
           :min="0"
           :max="1"
           :step="0.01"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -42,7 +41,6 @@
           :min="0"
           :max="2"
           :step="0.01"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSwitch
diff --git a/src/demo/TextAnimations/SplitTextDemo.vue b/src/demo/TextAnimations/SplitTextDemo.vue
index 9958516..942f1d2 100644
--- a/src/demo/TextAnimations/SplitTextDemo.vue
+++ b/src/demo/TextAnimations/SplitTextDemo.vue
@@ -24,32 +24,11 @@
       <Customize>
         <PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />
 
-        <PreviewSlider
-          title="Stagger Delay (ms)"
-          v-model="delay"
-          :min="10"
-          :max="500"
-          :step="10"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Stagger Delay (ms)" v-model="delay" :min="10" :max="500" :step="10" />
 
-        <PreviewSlider
-          title="Duration (s)"
-          v-model="duration"
-          :min="0.1"
-          :max="3"
-          :step="0.1"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="3" :step="0.1" />
 
-        <PreviewSlider
-          title="Threshold"
-          v-model="threshold"
-          :min="0.1"
-          :max="1"
-          :step="0.1"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
       </Customize>
 
       <PropTable :data="propData" />
diff --git a/src/demo/TextAnimations/TextTrailDemo.vue b/src/demo/TextAnimations/TextTrailDemo.vue
index a89572f..74b0f0a 100644
--- a/src/demo/TextAnimations/TextTrailDemo.vue
+++ b/src/demo/TextAnimations/TextTrailDemo.vue
@@ -14,43 +14,15 @@
       </div>
 
       <Customize>
-        <PreviewSlider
-          title="Noise Factor"
-          v-model="noiseFactor"
-          :min="1"
-          :max="25"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Noise Factor" v-model="noiseFactor" :min="1" :max="25" :step="1" />
 
-        <PreviewSlider
-          title="Noise Scale"
-          v-model="noiseScale"
-          :min="0"
-          :max="100"
-          :step="1"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Noise Scale" v-model="noiseScale" :min="0" :max="100" :step="1" />
 
-        <PreviewSlider
-          title="Font Weight"
-          v-model="fontWeight"
-          :min="100"
-          :max="900"
-          :step="100"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Font Weight" v-model="fontWeight" :min="100" :max="900" :step="100" />
 
-        <PreviewSlider
-          title="Alpha Persist Factor"
-          v-model="alphaPersistFactor"
-          :min="0.5"
-          :max="0.95"
-          :step="0.01"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Alpha Persist Factor" v-model="alphaPersistFactor" :min="0.5" :max="0.95" :step="0.01" />
 
-        <PreviewSwitch title="Animate Color" v-model="animateColor" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Animate Color" v-model="animateColor" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -82,7 +54,7 @@ import TextTrail from '../../content/TextAnimations/TextTrail/TextTrail.vue';
 import { textTrail } from '@/constants/code/TextAnimations/textTrailCode';
 import { useForceRerender } from '@/composables/useForceRerender';
 
-const { rerenderKey: key, forceRerender } = useForceRerender();
+const { rerenderKey: key } = useForceRerender();
 
 const noiseFactor = ref(1);
 const noiseScale = ref(5);
diff --git a/src/demo/TextAnimations/TrueFocusDemo.vue b/src/demo/TextAnimations/TrueFocusDemo.vue
index 466d03a..44d4d59 100644
--- a/src/demo/TextAnimations/TrueFocusDemo.vue
+++ b/src/demo/TextAnimations/TrueFocusDemo.vue
@@ -12,15 +12,7 @@
 
         <PreviewSwitch title="Hover Mode" v-model="manualMode" @update:model-value="forceRerender" />
 
-        <PreviewSlider
-          title="Blur Amount"
-          v-model="blurAmount"
-          :min="0"
-          :max="15"
-          :step="0.5"
-          value-unit="px"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSlider title="Blur Amount" v-model="blurAmount" :min="0" :max="15" :step="0.5" value-unit="px" />
 
         <PreviewSlider
           title="Animation Duration"
@@ -30,7 +22,6 @@
           :step="0.1"
           value-unit="s"
           :disabled="!manualMode"
-          @update:model-value="forceRerender"
         />
 
         <PreviewSlider
@@ -41,7 +32,6 @@
           :step="0.5"
           value-unit="s"
           :disabled="manualMode"
-          @update:model-value="forceRerender"
         />
       </Customize>
 

From f09a3cea0ecd8fc25cc8097320d64b9f44699d37 Mon Sep 17 00:00:00 2001
From: snepsnepy <snepysneptest@gmail.com>
Date: Wed, 16 Jul 2025 16:12:54 +0300
Subject: [PATCH 4/8] Added defineModel support for PreviewSwitch component and
 fixed small bug in ScrollRevealDemo component.

---
 src/components/common/PreviewSwitch.vue       | 11 +--
 src/demo/Animations/AnimatedContentDemo.vue   | 68 ++++-------------
 src/demo/Animations/FadeContentDemo.vue       | 48 ++++--------
 src/demo/Animations/MagnetDemo.vue            | 25 ++-----
 src/demo/Animations/MetaBallsDemo.vue         | 53 ++-----------
 src/demo/Backgrounds/IridescenceDemo.vue      | 14 +---
 src/demo/Backgrounds/LetterGlitchDemo.vue     | 29 +------
 src/demo/Backgrounds/ParticlesDemo.vue        | 18 +----
 src/demo/Components/CardSwapDemo.vue          |  2 +-
 src/demo/Components/CarouselDemo.vue          | 22 +++---
 src/demo/Components/MasonryDemo.vue           | 15 +++-
 src/demo/Components/ProfileCardDemo.vue       |  6 +-
 src/demo/Components/StackDemo.vue             | 28 ++-----
 src/demo/TextAnimations/BlurTextDemo.vue      | 26 +------
 src/demo/TextAnimations/CurvedLoopDemo.vue    | 28 +------
 src/demo/TextAnimations/DecryptedTextDemo.vue | 13 +++-
 src/demo/TextAnimations/FuzzyTextDemo.vue     | 29 +------
 src/demo/TextAnimations/ScrollRevealDemo.vue  | 26 +++----
 src/demo/TextAnimations/SplitTextDemo.vue     | 11 ++-
 src/demo/TextAnimations/TextCursorDemo.vue    | 10 +--
 src/demo/TextAnimations/TextPressureDemo.vue  | 75 ++++---------------
 src/demo/TextAnimations/TrueFocusDemo.vue     |  4 +-
 22 files changed, 146 insertions(+), 415 deletions(-)

diff --git a/src/components/common/PreviewSwitch.vue b/src/components/common/PreviewSwitch.vue
index 2f2fb13..6b97b92 100644
--- a/src/components/common/PreviewSwitch.vue
+++ b/src/components/common/PreviewSwitch.vue
@@ -2,11 +2,7 @@
   <div class="preview-switch">
     <span class="switch-label">{{ title }}</span>
 
-    <ToggleSwitch
-      :model-value="modelValue"
-      @update:model-value="$emit('update:modelValue', $event)"
-      :disabled="disabled"
-    />
+    <ToggleSwitch v-model="model" :disabled="disabled" />
   </div>
 </template>
 
@@ -15,13 +11,10 @@ import ToggleSwitch from 'primevue/toggleswitch';
 
 defineProps<{
   title: string;
-  modelValue: boolean;
   disabled?: boolean;
 }>();
 
-defineEmits<{
-  'update:modelValue': [value: boolean];
-}>();
+const model = defineModel<boolean>();
 </script>
 
 <style scoped>
diff --git a/src/demo/Animations/AnimatedContentDemo.vue b/src/demo/Animations/AnimatedContentDemo.vue
index cfaa567..d0346c2 100644
--- a/src/demo/Animations/AnimatedContentDemo.vue
+++ b/src/demo/Animations/AnimatedContentDemo.vue
@@ -29,59 +29,21 @@
 
         <PreviewSelect title="Easing Function" v-model="ease" :options="easeOptions" />
 
-        <PreviewSlider
-          title="Distance"
-          v-model="distance"
-          :min="50"
-          :max="300"
-          :step="10"
-        />
-
-        <PreviewSlider
-          title="Duration"
-          v-model="duration"
-          :min="0.1"
-          :max="3"
-          :step="0.1"
-          value-unit="s"
-        />
-
-        <PreviewSlider
-          title="Delay"
-          v-model="delay"
-          :min="0"
-          :max="2"
-          :step="0.1"
-          value-unit="s"
-        />
-
-        <PreviewSlider
-          title="Initial Opacity"
-          v-model="initialOpacity"
-          :min="0"
-          :max="1"
-          :step="0.1"
-        />
-
-        <PreviewSlider
-          title="Initial Scale"
-          v-model="scale"
-          :min="0.1"
-          :max="2"
-          :step="0.1"
-        />
-
-        <PreviewSlider
-          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="Animate Opacity" v-model="animateOpacity" @update:model-value="forceRerender" />
+        <PreviewSlider title="Distance" v-model="distance" :min="50" :max="300" :step="10" />
+
+        <PreviewSlider title="Duration" v-model="duration" :min="0.1" :max="3" :step="0.1" value-unit="s" />
+
+        <PreviewSlider title="Delay" v-model="delay" :min="0" :max="2" :step="0.1" value-unit="s" />
+
+        <PreviewSlider title="Initial Opacity" v-model="initialOpacity" :min="0" :max="1" :step="0.1" />
+
+        <PreviewSlider title="Initial Scale" v-model="scale" :min="0.1" :max="2" :step="0.1" />
+
+        <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
+
+        <PreviewSwitch title="Reverse Direction" v-model="reverse" />
+
+        <PreviewSwitch title="Animate Opacity" v-model="animateOpacity" />
       </Customize>
 
       <PropTable :data="propData" />
diff --git a/src/demo/Animations/FadeContentDemo.vue b/src/demo/Animations/FadeContentDemo.vue
index 3b9709e..4bafdf1 100644
--- a/src/demo/Animations/FadeContentDemo.vue
+++ b/src/demo/Animations/FadeContentDemo.vue
@@ -23,39 +23,15 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Enable Blur Effect" v-model="blur" @update:model-value="forceRerender" />
-
-        <PreviewSlider
-          title="Duration (ms)"
-          v-model="duration"
-          :min="100"
-          :max="3000"
-          :step="100"
-        />
-
-        <PreviewSlider
-          title="Delay (ms)"
-          v-model="delay"
-          :min="0"
-          :max="1000"
-          :step="50"
-        />
-
-        <PreviewSlider
-          title="Threshold"
-          v-model="threshold"
-          :min="0.1"
-          :max="1"
-          :step="0.1"
-        />
-
-        <PreviewSlider
-          title="Initial Opacity"
-          v-model="initialOpacity"
-          :min="0"
-          :max="1"
-          :step="0.1"
-        />
+        <PreviewSwitch title="Enable Blur Effect" v-model="blur" />
+
+        <PreviewSlider title="Duration (ms)" v-model="duration" :min="100" :max="3000" :step="100" />
+
+        <PreviewSlider title="Delay (ms)" v-model="delay" :min="0" :max="1000" :step="50" />
+
+        <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1" />
+
+        <PreviewSlider 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>
diff --git a/src/demo/Animations/MagnetDemo.vue b/src/demo/Animations/MagnetDemo.vue
index b0948fa..131fa9a 100644
--- a/src/demo/Animations/MagnetDemo.vue
+++ b/src/demo/Animations/MagnetDemo.vue
@@ -27,24 +27,11 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Disabled" v-model="disabled" @update:model-value="forceRerender" />
-
-        <PreviewSlider
-          title="Padding"
-          v-model="padding"
-          :min="0"
-          :max="300"
-          :step="10"
-          value-unit="px"
-        />
-
-        <PreviewSlider
-          title="Strength"
-          v-model="magnetStrength"
-          :min="1"
-          :max="10"
-          :step="1"
-        />
+        <PreviewSwitch title="Disabled" v-model="disabled" />
+
+        <PreviewSlider title="Padding" v-model="padding" :min="0" :max="300" :step="10" value-unit="px" />
+
+        <PreviewSlider 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 = [
   {
diff --git a/src/demo/Animations/MetaBallsDemo.vue b/src/demo/Animations/MetaBallsDemo.vue
index ec01d1a..1a61b7c 100644
--- a/src/demo/Animations/MetaBallsDemo.vue
+++ b/src/demo/Animations/MetaBallsDemo.vue
@@ -19,55 +19,19 @@
       <Customize>
         <PreviewColor title="Color" v-model="color" />
 
-        <PreviewSlider
-          title="Ball Count"
-          :min="2"
-          :max="30"
-          :step="1"
-          v-model="ballCount"
-        />
+        <PreviewSlider title="Ball Count" :min="2" :max="30" :step="1" v-model="ballCount" />
 
-        <PreviewSlider
-          title="Speed"
-          :min="0.1"
-          :max="1"
-          :step="0.1"
-          v-model="speed"
-        />
+        <PreviewSlider title="Speed" :min="0.1" :max="1" :step="0.1" v-model="speed" />
 
-        <PreviewSlider
-          title="Size"
-          :min="10"
-          :max="50"
-          :step="1"
-          v-model="animationSize"
-        />
+        <PreviewSlider title="Size" :min="10" :max="50" :step="1" v-model="animationSize" />
 
-        <PreviewSlider
-          title="Clump Factor"
-          :min="0.1"
-          :max="2"
-          :step="0.1"
-          v-model="clumpFactor"
-        />
+        <PreviewSlider 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
-          title="Cursor Smoothing"
-          :min="0.001"
-          :max="0.25"
-          :step="0.001"
-          v-model="hoverSmoothness"
-        />
+        <PreviewSlider title="Cursor Smoothing" :min="0.001" :max="0.25" :step="0.001" v-model="hoverSmoothness" />
 
-        <PreviewSlider
-          title="Cursor Size"
-          :min="1"
-          :max="5"
-          :step="1"
-          v-model="cursorBallSize"
-        />
+        <PreviewSlider 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);
diff --git a/src/demo/Backgrounds/IridescenceDemo.vue b/src/demo/Backgrounds/IridescenceDemo.vue
index d5fc3bc..6d459b6 100644
--- a/src/demo/Backgrounds/IridescenceDemo.vue
+++ b/src/demo/Backgrounds/IridescenceDemo.vue
@@ -12,17 +12,11 @@
 
         <PreviewSlider :min="0" :max="1" :step="0.1" v-model="colors[2]" title="Blue" />
 
-        <PreviewSlider :min="0" :max="2" :step="0.1" v-model="speed" title="Speed"  />
+        <PreviewSlider :min="0" :max="2" :step="0.1" v-model="speed" title="Speed" />
 
-        <PreviewSlider
-          :min="0"
-          :max="0.5"
-          :step="0.01"
-          v-model="amplitude"
-          title="Amplitude"
-        />
+        <PreviewSlider :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 = [
   {
diff --git a/src/demo/Backgrounds/LetterGlitchDemo.vue b/src/demo/Backgrounds/LetterGlitchDemo.vue
index c0c91ec..6ef15a3 100644
--- a/src/demo/Backgrounds/LetterGlitchDemo.vue
+++ b/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
-            title="Show Center Vignette"
-            :model-value="showCenterVignette"
-            @update:model-value="updateCenterVignette"
-          />
+          <PreviewSwitch title="Show Center Vignette" v-model="showCenterVignette" />
 
-          <PreviewSwitch
-            title="Show Outer Vignette"
-            :model-value="showOuterVignette"
-            @update:model-value="updateOuterVignette"
-          />
+          <PreviewSwitch title="Show Outer Vignette" v-model="showOuterVignette" />
         </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',
diff --git a/src/demo/Backgrounds/ParticlesDemo.vue b/src/demo/Backgrounds/ParticlesDemo.vue
index 2ef66bc..c85e505 100644
--- a/src/demo/Backgrounds/ParticlesDemo.vue
+++ b/src/demo/Backgrounds/ParticlesDemo.vue
@@ -30,23 +30,11 @@
 
           <PreviewSlider title="Base Size" v-model="baseSize" :min="100" :max="1000" :step="100" />
 
-          <PreviewSwitch
-            title="Mouse Interaction"
-            :model-value="moveParticlesOnHover"
-            @update:model-value="moveParticlesOnHover = $event"
-          />
+          <PreviewSwitch title="Mouse Interaction" v-model="moveParticlesOnHover" />
 
-          <PreviewSwitch
-            title="Particle Transparency"
-            :model-value="alphaParticles"
-            @update:model-value="alphaParticles = $event"
-          />
+          <PreviewSwitch title="Particle Transparency" v-model="alphaParticles" />
 
-          <PreviewSwitch
-            title="Disable Rotation"
-            :model-value="disableRotation"
-            @update:model-value="disableRotation = $event"
-          />
+          <PreviewSwitch title="Disable Rotation" v-model="disableRotation" />
         </Customize>
 
         <PropTable :data="propData" />
diff --git a/src/demo/Components/CardSwapDemo.vue b/src/demo/Components/CardSwapDemo.vue
index 87b1570..d6f51cb 100644
--- a/src/demo/Components/CardSwapDemo.vue
+++ b/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" />
 
diff --git a/src/demo/Components/CarouselDemo.vue b/src/demo/Components/CarouselDemo.vue
index bc18b25..93f6a90 100644
--- a/src/demo/Components/CarouselDemo.vue
+++ b/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
-          title="Pause On Hover"
-          v-model="pauseOnHover"
-          :disabled="!autoplay"
-          @update:model-value="forceRerender"
-        />
+        <PreviewSwitch title="Pause On Hover" v-model="pauseOnHover" :disabled="!autoplay" />
       </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>
diff --git a/src/demo/Components/MasonryDemo.vue b/src/demo/Components/MasonryDemo.vue
index 2103737..c732cf2 100644
--- a/src/demo/Components/MasonryDemo.vue
+++ b/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>
diff --git a/src/demo/Components/ProfileCardDemo.vue b/src/demo/Components/ProfileCardDemo.vue
index b25fee8..41a4c07 100644
--- a/src/demo/Components/ProfileCardDemo.vue
+++ b/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" />
diff --git a/src/demo/Components/StackDemo.vue b/src/demo/Components/StackDemo.vue
index b8e132b..72fbc54 100644
--- a/src/demo/Components/StackDemo.vue
+++ b/src/demo/Components/StackDemo.vue
@@ -13,28 +13,10 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Random Rotation" v-model="randomRotation" @update:model-value="forceRerender" />
-        <PreviewSlider
-          title="Sensitivity"
-          v-model="sensitivity"
-          :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"
-        />
+        <PreviewSwitch title="Random Rotation" v-model="randomRotation" />
+        <PreviewSlider title="Sensitivity" v-model="sensitivity" :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({
diff --git a/src/demo/TextAnimations/BlurTextDemo.vue b/src/demo/TextAnimations/BlurTextDemo.vue
index ded99b1..0bfd60d 100644
--- a/src/demo/TextAnimations/BlurTextDemo.vue
+++ b/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" />
diff --git a/src/demo/TextAnimations/CurvedLoopDemo.vue b/src/demo/TextAnimations/CurvedLoopDemo.vue
index 12656d8..927cae0 100644
--- a/src/demo/TextAnimations/CurvedLoopDemo.vue
+++ b/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" />
diff --git a/src/demo/TextAnimations/DecryptedTextDemo.vue b/src/demo/TextAnimations/DecryptedTextDemo.vue
index e129111..00dc4bf 100644
--- a/src/demo/TextAnimations/DecryptedTextDemo.vue
+++ b/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>
diff --git a/src/demo/TextAnimations/FuzzyTextDemo.vue b/src/demo/TextAnimations/FuzzyTextDemo.vue
index a05a141..4e3e8a9 100644
--- a/src/demo/TextAnimations/FuzzyTextDemo.vue
+++ b/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 = [
   {
diff --git a/src/demo/TextAnimations/ScrollRevealDemo.vue b/src/demo/TextAnimations/ScrollRevealDemo.vue
index 4e11965..5a2d9c7 100644
--- a/src/demo/TextAnimations/ScrollRevealDemo.vue
+++ b/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',
diff --git a/src/demo/TextAnimations/SplitTextDemo.vue b/src/demo/TextAnimations/SplitTextDemo.vue
index 942f1d2..598ca5a 100644
--- a/src/demo/TextAnimations/SplitTextDemo.vue
+++ b/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>
diff --git a/src/demo/TextAnimations/TextCursorDemo.vue b/src/demo/TextAnimations/TextCursorDemo.vue
index 3fd7df8..2a65113 100644
--- a/src/demo/TextAnimations/TextCursorDemo.vue
+++ b/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);
diff --git a/src/demo/TextAnimations/TextPressureDemo.vue b/src/demo/TextAnimations/TextPressureDemo.vue
index 909c147..1b7a4a9 100644
--- a/src/demo/TextAnimations/TextPressureDemo.vue
+++ b/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>
diff --git a/src/demo/TextAnimations/TrueFocusDemo.vue b/src/demo/TextAnimations/TrueFocusDemo.vue
index 44d4d59..e792bc4 100644
--- a/src/demo/TextAnimations/TrueFocusDemo.vue
+++ b/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);

From 14f6d2d18b02d9e0554665a647969bbe11f0ba66 Mon Sep 17 00:00:00 2001
From: snepsnepy <snepysneptest@gmail.com>
Date: Wed, 16 Jul 2025 16:17:28 +0300
Subject: [PATCH 5/8] Added defineModel support for PreviewText and added
 missing Customize component in GlitchTextDemo.

---
 src/components/common/PreviewText.vue      | 10 ++-------
 src/demo/TextAnimations/AsciiTextDemo.vue  | 26 ++++------------------
 src/demo/TextAnimations/GlitchTextDemo.vue |  1 +
 3 files changed, 7 insertions(+), 30 deletions(-)

diff --git a/src/components/common/PreviewText.vue b/src/components/common/PreviewText.vue
index f62cdf4..7cf8f2d 100644
--- a/src/components/common/PreviewText.vue
+++ b/src/components/common/PreviewText.vue
@@ -3,24 +3,18 @@
     <span class="text-label">{{ title }}</span>
 
     <input
-      :value="modelValue"
-      @input="handleChange"
+      v-model="model"
       class="w-[300px] px-3 py-2 bg-[#0b0b0b] border border-[#333] rounded-md text-white focus:outline-none focus:border-[#666]"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-const emit = defineEmits(['update:modelValue']);
 defineProps<{
   title: string;
-  modelValue: string;
 }>();
 
-const handleChange = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  emit('update:modelValue', target.value);
-};
+const model = defineModel<string>();
 </script>
 
 <style scoped>
diff --git a/src/demo/TextAnimations/AsciiTextDemo.vue b/src/demo/TextAnimations/AsciiTextDemo.vue
index 571e7f6..fa187f2 100644
--- a/src/demo/TextAnimations/AsciiTextDemo.vue
+++ b/src/demo/TextAnimations/AsciiTextDemo.vue
@@ -14,31 +14,13 @@
       </div>
 
       <Customize>
-        <PreviewText title="Text" v-model="text" @update:model-value="forceRerender" />
+        <PreviewText title="Text" v-model="text" />
 
-        <PreviewSlider
-          title="ASCII Font Size"
-          v-model="asciiFontSize"
-          :min="2"
-          :max="20"
-          :step="1"
-        />
+        <PreviewSlider title="ASCII Font Size" v-model="asciiFontSize" :min="2" :max="20" :step="1" />
 
-        <PreviewSlider
-          title="Text Font Size"
-          v-model="textFontSize"
-          :min="100"
-          :max="400"
-          :step="25"
-        />
+        <PreviewSlider title="Text Font Size" v-model="textFontSize" :min="100" :max="400" :step="25" />
 
-        <PreviewSlider
-          title="Base Height"
-          v-model="planeBaseHeight"
-          :min="4"
-          :max="16"
-          :step="1"
-        />
+        <PreviewSlider title="Base Height" v-model="planeBaseHeight" :min="4" :max="16" :step="1" />
 
         <PreviewSwitch title="Enable Waves" v-model="enableWaves" />
 
diff --git a/src/demo/TextAnimations/GlitchTextDemo.vue b/src/demo/TextAnimations/GlitchTextDemo.vue
index 2c9d0b7..33fabb3 100644
--- a/src/demo/TextAnimations/GlitchTextDemo.vue
+++ b/src/demo/TextAnimations/GlitchTextDemo.vue
@@ -46,6 +46,7 @@ import PropTable from '../../components/common/PropTable.vue';
 import PreviewText from '../../components/common/PreviewText.vue';
 import PreviewSlider from '../../components/common/PreviewSlider.vue';
 import PreviewSwitch from '../../components/common/PreviewSwitch.vue';
+import Customize from '@/components/common/Customize.vue';
 import { glitchText } from '@/constants/code/TextAnimations/glitchTextCode';
 
 const text = ref('Vue Bits');

From f734b64006fa75bb6379a9113b596b520a4a45e1 Mon Sep 17 00:00:00 2001
From: snepsnepy <snepysneptest@gmail.com>
Date: Wed, 16 Jul 2025 16:18:56 +0300
Subject: [PATCH 6/8] Removed model-value update from MetallicPaintDemo.

---
 src/demo/Animations/MetallicPaintDemo.vue | 42 ++++-------------------
 1 file changed, 6 insertions(+), 36 deletions(-)

diff --git a/src/demo/Animations/MetallicPaintDemo.vue b/src/demo/Animations/MetallicPaintDemo.vue
index 158c290..1176cb1 100644
--- a/src/demo/Animations/MetallicPaintDemo.vue
+++ b/src/demo/Animations/MetallicPaintDemo.vue
@@ -18,47 +18,17 @@
       </div>
 
       <Customize>
-        <PreviewSlider title="Edge" v-model="edge" :min="0" :max="1" :step="0.1" @update:model-value="forceRerender" />
+        <PreviewSlider title="Edge" v-model="edge" :min="0" :max="1" :step="0.1" />
 
-        <PreviewSlider
-          title="Pattern Scale"
-          v-model="patternScale"
-          :min="1"
-          :max="5"
-          :step="0.1"
-        />
+        <PreviewSlider title="Pattern Scale" v-model="patternScale" :min="1" :max="5" :step="0.1" />
 
-        <PreviewSlider
-          title="Pattern Blur"
-          v-model="patternBlur"
-          :min="0"
-          :max="0.1"
-          :step="0.001"
-        />
+        <PreviewSlider title="Pattern Blur" v-model="patternBlur" :min="0" :max="0.1" :step="0.001" />
 
-        <PreviewSlider
-          title="Refraction"
-          v-model="refraction"
-          :min="0"
-          :max="0.1"
-          :step="0.01"
-        />
+        <PreviewSlider title="Refraction" v-model="refraction" :min="0" :max="0.1" :step="0.01" />
 
-        <PreviewSlider
-          title="Liquid"
-          v-model="liquid"
-          :min="0"
-          :max="1"
-          :step="0.01"
-        />
+        <PreviewSlider title="Liquid" v-model="liquid" :min="0" :max="1" :step="0.01" />
 
-        <PreviewSlider
-          title="Speed"
-          v-model="speed"
-          :min="0"
-          :max="1"
-          :step="0.01"
-        />
+        <PreviewSlider title="Speed" v-model="speed" :min="0" :max="1" :step="0.01" />
       </Customize>
 
       <PropTable :data="propData" />

From 9c3d70d27719c8a553bad802b91ac7eeb3aade1e Mon Sep 17 00:00:00 2001
From: snepsnepy <snepysneptest@gmail.com>
Date: Wed, 16 Jul 2025 16:19:59 +0300
Subject: [PATCH 7/8] Removed unused import.

---
 src/demo/Animations/MetallicPaintDemo.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/demo/Animations/MetallicPaintDemo.vue b/src/demo/Animations/MetallicPaintDemo.vue
index 1176cb1..507c2f0 100644
--- a/src/demo/Animations/MetallicPaintDemo.vue
+++ b/src/demo/Animations/MetallicPaintDemo.vue
@@ -66,7 +66,7 @@ const patternBlur = ref(0.005);
 const liquid = ref(0.07);
 const speed = ref(0.3);
 
-const { rerenderKey, forceRerender } = useForceRerender();
+const { rerenderKey } = useForceRerender();
 
 const propData = [
   {

From 2e55686e70ffc08b9c01c5db4b4b74ac76f3cea5 Mon Sep 17 00:00:00 2001
From: snepsnepy <snepysneptest@gmail.com>
Date: Wed, 16 Jul 2025 16:28:29 +0300
Subject: [PATCH 8/8] Updated BallpitDemo and OrbDemo to use the latest
 changes.

---
 src/demo/Backgrounds/BallpitDemo.vue | 54 +++-------------------------
 src/demo/Backgrounds/OrbDemo.vue     | 33 +++--------------
 2 files changed, 9 insertions(+), 78 deletions(-)

diff --git a/src/demo/Backgrounds/BallpitDemo.vue b/src/demo/Backgrounds/BallpitDemo.vue
index ed8ec1f..bf93e23 100644
--- a/src/demo/Backgrounds/BallpitDemo.vue
+++ b/src/demo/Backgrounds/BallpitDemo.vue
@@ -17,59 +17,15 @@
       </div>
 
       <Customize>
-        <PreviewSwitch title="Display Cursor" v-model="followCursor" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Display Cursor" v-model="followCursor" />
 
-        <PreviewSlider
-          title="Ball Count"
-          :min="50"
-          :max="500"
-          :step="10"
-          v-model="count"
-          @onChange="
-            (val: number) => {
-              count = val;
-            }
-          "
-        />
+        <PreviewSlider title="Ball Count" :min="50" :max="500" :step="10" v-model="count" />
 
-        <PreviewSlider
-          title="Gravity"
-          :min="0.1"
-          :max="1"
-          :step="0.1"
-          v-model="gravity"
-          @onChange="
-            (val: number) => {
-              gravity = val;
-            }
-          "
-        />
+        <PreviewSlider title="Gravity" :min="0.1" :max="1" :step="0.1" v-model="gravity" />
 
-        <PreviewSlider
-          title="Friction"
-          :min="0.9"
-          :max="1"
-          :step="0.001"
-          v-model="friction"
-          @onChange="
-            (val: number) => {
-              friction = val;
-            }
-          "
-        />
+        <PreviewSlider title="Friction" :min="0.9" :max="1" :step="0.001" v-model="friction" />
 
-        <PreviewSlider
-          title="Wall Bounce"
-          :min="0.1"
-          :max="1"
-          :step="0.05"
-          v-model="wallBounce"
-          @onChange="
-            (val: number) => {
-              wallBounce = val;
-            }
-          "
-        />
+        <PreviewSlider title="Wall Bounce" :min="0.1" :max="1" :step="0.05" v-model="wallBounce" />
       </Customize>
 
       <PropTable :data="propData" />
diff --git a/src/demo/Backgrounds/OrbDemo.vue b/src/demo/Backgrounds/OrbDemo.vue
index 30a1513..11dbf88 100644
--- a/src/demo/Backgrounds/OrbDemo.vue
+++ b/src/demo/Backgrounds/OrbDemo.vue
@@ -12,35 +12,13 @@
       </div>
 
       <Customize>
-        <PreviewSlider
-          title="Hue Shift"
-          :min="0"
-          :max="360"
-          :step="1"
-          v-model="hue"
-          @onChange="
-            (val: number) => {
-              hue = val;
-            }
-          "
-        />
+        <PreviewSlider title="Hue Shift" :min="0" :max="360" :step="1" v-model="hue" />
 
-        <PreviewSlider
-          title="Hover Intensity"
-          :min="0"
-          :max="5"
-          :step="0.01"
-          v-model="hoverIntensity"
-          @onChange="
-            (val: number) => {
-              hoverIntensity = val;
-            }
-          "
-        />
+        <PreviewSlider title="Hover Intensity" :min="0" :max="5" :step="0.01" v-model="hoverIntensity" />
 
-        <PreviewSwitch title="Rotate on Hover" v-model="rotateOnHover" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Rotate on Hover" v-model="rotateOnHover" />
 
-        <PreviewSwitch title="Force Hover State" v-model="forceHoverState" @update:model-value="forceRerender" />
+        <PreviewSwitch title="Force Hover State" v-model="forceHoverState" />
       </Customize>
 
       <PropTable :data="propData" />
@@ -58,7 +36,6 @@
 </template>
 
 <script setup lang="ts">
-import { useForceRerender } from '@/composables/useForceRerender';
 import { ref, watch } from 'vue';
 import CliInstallation from '../../components/code/CliInstallation.vue';
 import CodeExample from '../../components/code/CodeExample.vue';
@@ -71,8 +48,6 @@ import TabbedLayout from '../../components/common/TabbedLayout.vue';
 import { orb } from '../../constants/code/Backgrounds/orbCode';
 import Orb from '../../content/Backgrounds/Orb/Orb.vue';
 
-const { forceRerender } = useForceRerender();
-
 const hue = ref(100);
 const hoverIntensity = ref(0.5);
 const rotateOnHover = ref(true);