feat(TrueFocus): add syncGroup and index props for multi-instance sync

src/demo/TextAnimations/TrueFocusDemo.vue

@@ -3,7 +3,9 @@
     <template #preview>
       <div class="demo-container h-[400px]">
         <div :key="key" class="flex flex-col justify-center items-center m-8 pl-6 w-full">
-          <TrueFocus :key="key" v-bind="config" />
+          <TrueFocus :key="`${key}-${syncMode}-1`" v-bind="config" />
+          <br />
+          <TrueFocus :key="`${key}-${syncMode}-2`" v-bind="config" />
         </div>
       </div>
 
@@ -12,6 +14,8 @@
 
         <PreviewSwitch title="Hover Mode" v-model="manualMode" />
 
+        <PreviewSwitch title="Apply Sync Group" v-model="syncMode" />
+
         <PreviewSlider title="Blur Amount" v-model="blurAmount" :min="0" :max="15" :step="0.5" value-unit="px" />
 
         <PreviewSlider
@@ -72,6 +76,8 @@ const blurAmount = ref(5);
 const animationDuration = ref(0.5);
 const pauseBetweenAnimations = ref(1);
 const borderColor = ref('#27FF64');
+const syncMode = ref(false);
+const defaultBlur = ref(true);
 
 const config = computed(() => ({
   sentence: 'True Focus',
@@ -79,7 +85,9 @@ const config = computed(() => ({
   blurAmount: blurAmount.value,
   borderColor: borderColor.value,
   animationDuration: animationDuration.value,
-  pauseBetweenAnimations: pauseBetweenAnimations.value
+  pauseBetweenAnimations: pauseBetweenAnimations.value,
+  syncGroup: syncMode.value ? 'sync-group-demo' : undefined,
+  defaultBlur: defaultBlur.value
 }));
 
 const propData = [
@@ -124,6 +132,20 @@ const propData = [
     type: 'number',
     default: '1',
     description: 'Time to pause between focusing on each word (in auto mode).'
+  },
+  {
+    name: 'index',
+    type: 'Array<number>',
+    default: 'undefined',
+    description:
+      'Maps each word to a shared index value, used to coordinate focus position across multiple instances in the same syncGroup.'
+  },
+  {
+    name: 'syncGroup',
+    type: 'string',
+    default: 'undefined',
+    description:
+      'A group identifier. All instances sharing the same syncGroup will stay in sync, hovering or animating one will reflect on all others.'
   }
 ];
 </script>