Added defineModel support for PreviewColor component. Updated watch in TrueFocus component.

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<{
+const props = defineProps<{ title: string; disabled?: boolean }>();
-  title: string;
+const color = defineModel<string>();
-  modelValue: string;
-  disabled?: boolean;
-}>();
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string];
-}>();
 
 const handleColorChange = (event: Event) => {
-  const target = event.target as HTMLInputElement;
+  color.value = (event.target as HTMLInputElement).value;
-  emit('update:modelValue', target.value);
 };
 </script>
 

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;

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="Fill Color" v-model="fillColor" />
-        <PreviewColor title="Inner Color" v-model="innerColor" @update:model-value="forceRerender" />
+        <PreviewColor title="Inner Color" v-model="innerColor" />
-        <PreviewColor title="Shadow Color" v-model="shadowColor" @update:model-value="forceRerender" />
+        <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');

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"

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"

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" />

src/demo/Backgrounds/AuroraDemo.vue

@@ -22,8 +22,7 @@
                 v-for="(color, index) in colorStops"
                 :key="index"
                 :title="`Color ${index + 1}`"
-                :model-value="color"
+                v-model="colorStops[index]"
-                @update:model-value="value => updateColorStop(index, value)"
               />
             </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',

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"
+            v-model="colorStops[index]"
-            @update:model-value="value => updateColorStop(index, value)"
           />
         </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',

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"

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

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 { rerenderKey } = useForceRerender();
-
-const updateColor = (value: string) => {
-  color.value = value;
-  forceRerender();
-};
 
 const propData = [
   { name: 'particleCount', type: 'number', default: '200', description: 'The number of particles to generate.' },

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" />

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>
 

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>

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>

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" />