From a6013535d58fb00576c97ba4a805494a4c5936a2 Mon Sep 17 00:00:00 2001
From: Jian Qi <e.jianqi@gmail.com>
Date: Wed, 25 Feb 2026 16:58:23 +0800
Subject: [PATCH] feat(TrueFocus): add defaultBlur prop for manualMode mouse
 leave behavior

---
 src/content/TextAnimations/TrueFocus/TrueFocus.vue | 11 +++++++++--
 src/demo/TextAnimations/TrueFocusDemo.vue          |  9 +++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/content/TextAnimations/TrueFocus/TrueFocus.vue b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
index 46e737f..d7bfa70 100644
--- a/src/content/TextAnimations/TrueFocus/TrueFocus.vue
+++ b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
@@ -12,6 +12,7 @@ interface TrueFocusProps {
   pauseBetweenAnimations?: number;
   index?: Array<number>;
   syncGroup?: string;
+  defaultBlur?: boolean;
 }
 
 const props = withDefaults(defineProps<TrueFocusProps>(), {
@@ -21,7 +22,8 @@ const props = withDefaults(defineProps<TrueFocusProps>(), {
   borderColor: 'green',
   glowColor: 'rgba(0, 255, 0, 0.6)',
   animationDuration: 0.5,
-  pauseBetweenAnimations: 1
+  pauseBetweenAnimations: 1,
+  defaultBlur: true
 });
 
 const words = computed(() => props.sentence.split(' '));
@@ -72,7 +74,11 @@ const handleMouseEnter = (index: number) => {
 
 const handleMouseLeave = () => {
   if (props.manualMode) {
-    currentIndex.value = lastActiveIndex.value || 0;
+    if (props.defaultBlur) {
+      currentIndex.value = lastActiveIndex.value || 0;
+      return;
+    }
+    currentIndex.value = -1;
   }
 };
 
@@ -128,6 +134,7 @@ onUnmounted(() => {
   if (props.syncGroup) unregisterSyncGroup(props.syncGroup);
 });
 </script>
+
 <script lang="ts">
 interface SyncGroupState {
   index: Ref<number>;
diff --git a/src/demo/TextAnimations/TrueFocusDemo.vue b/src/demo/TextAnimations/TrueFocusDemo.vue
index da527c7..0c18230 100644
--- a/src/demo/TextAnimations/TrueFocusDemo.vue
+++ b/src/demo/TextAnimations/TrueFocusDemo.vue
@@ -16,6 +16,8 @@
 
         <PreviewSwitch title="Apply Sync Group" v-model="syncMode" />
 
+        <PreviewSwitch title="Default Blur" v-model="defaultBlur" />
+
         <PreviewSlider title="Blur Amount" v-model="blurAmount" :min="0" :max="15" :step="0.5" value-unit="px" />
 
         <PreviewSlider
@@ -146,6 +148,13 @@ const propData = [
     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.'
+  },
+  {
+    name: 'defaultBlur',
+    type: 'boolean',
+    default: 'true',
+    description:
+      'In manualMode, determines behavior on mouse leave: true restores focus to the last hovered word, false clears all blur.'
   }
 ];
 </script>