From 0b97a8c75aa68b3d6e8dcf93d1add9a4721b8c5a Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Fri, 11 Jul 2025 18:18:45 +0530
Subject: [PATCH 1/2] Create <TrueFocus /> text animation

---
 src/constants/Categories.ts                   |   1 +
 src/constants/Components.ts                   |   1 +
 .../code/TextAnimations/trueFocusCode.ts      |  22 ++
 .../TextAnimations/TrueFocus/TrueFocus.vue    | 218 ++++++++++++++++++
 src/demo/TextAnimations/TrueFocusDemo.vue     | 158 +++++++++++++
 5 files changed, 400 insertions(+)
 create mode 100644 src/constants/code/TextAnimations/trueFocusCode.ts
 create mode 100644 src/content/TextAnimations/TrueFocus/TrueFocus.vue
 create mode 100644 src/demo/TextAnimations/TrueFocusDemo.vue

diff --git a/src/constants/Categories.ts b/src/constants/Categories.ts
index 646629f..d7eedae 100644
--- a/src/constants/Categories.ts
+++ b/src/constants/Categories.ts
@@ -19,6 +19,7 @@ export const CATEGORIES = [
       'Falling Text',
       'Text Cursor',
       'Decrypted Text',
+      'True Focus'
     ]
   },
   {
diff --git a/src/constants/Components.ts b/src/constants/Components.ts
index ac70fc8..a9d1b62 100644
--- a/src/constants/Components.ts
+++ b/src/constants/Components.ts
@@ -23,6 +23,7 @@ const textAnimations = {
   'falling-text': () => import("../demo/TextAnimations/FallingTextDemo.vue"),
   'text-cursor': () => import("../demo/TextAnimations/TextCursorDemo.vue"),
   'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
+  'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
 };
 
 const components = {
diff --git a/src/constants/code/TextAnimations/trueFocusCode.ts b/src/constants/code/TextAnimations/trueFocusCode.ts
new file mode 100644
index 0000000..4e0acc4
--- /dev/null
+++ b/src/constants/code/TextAnimations/trueFocusCode.ts
@@ -0,0 +1,22 @@
+import code from "@/content/TextAnimations/TrueFocus/TrueFocus.vue?raw";
+import type { CodeObject } from "../../../types/code";
+
+export const trueFocus: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/TrueFocus`,
+  installation: `npm install motion-v`,
+  usage: `<template>
+  <TrueFocus
+    sentence="True Focus"
+    manualMode="false"
+    blurAmount="5"
+    borderColor="red"
+    animationDuration="2"
+    pauseBetweenAnimations="1"
+  />
+</template>
+
+<script setup lang="ts">
+  import TrueFocus from "./TrueFocus.vue";
+</script>`,
+  code,
+};
diff --git a/src/content/TextAnimations/TrueFocus/TrueFocus.vue b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
new file mode 100644
index 0000000..b5ebc51
--- /dev/null
+++ b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import { ref, onUnmounted, watch, nextTick, computed } from "vue";
+
+interface TrueFocusProps {
+  sentence?: string;
+  manualMode?: boolean;
+  blurAmount?: number;
+  borderColor?: string;
+  glowColor?: string;
+  animationDuration?: number;
+  pauseBetweenAnimations?: number;
+}
+
+const props = withDefaults(defineProps<TrueFocusProps>(), {
+  sentence: "True Focus",
+  manualMode: false,
+  blurAmount: 5,
+  borderColor: "green",
+  glowColor: "rgba(0, 255, 0, 0.6)",
+  animationDuration: 0.5,
+  pauseBetweenAnimations: 1,
+});
+
+const words = computed(() => props.sentence.split(" "));
+const currentIndex = ref(0);
+const lastActiveIndex = ref<number | null>(null);
+const containerRef = ref<HTMLDivElement>();
+const wordRefs = ref<HTMLSpanElement[]>([]);
+const focusRect = ref({ x: 0, y: 0, width: 0, height: 0 });
+
+let interval: number | null = null;
+
+watch(
+  [
+    () => props.manualMode,
+    () => props.animationDuration,
+    () => props.pauseBetweenAnimations,
+    words,
+  ],
+  () => {
+    if (interval) {
+      clearInterval(interval);
+      interval = null;
+    }
+
+    if (!props.manualMode) {
+      interval = setInterval(
+        () => {
+          currentIndex.value = (currentIndex.value + 1) % words.value.length;
+        },
+        (props.animationDuration + props.pauseBetweenAnimations) * 1000,
+      );
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  [currentIndex, words],
+  async () => {
+    if (currentIndex.value === null || currentIndex.value === -1) return;
+    if (!wordRefs.value[currentIndex.value] || !containerRef.value) return;
+
+    await nextTick();
+
+    const parentRect = containerRef.value.getBoundingClientRect();
+    const activeRect = wordRefs.value[currentIndex.value].getBoundingClientRect();
+
+    focusRect.value = {
+      x: activeRect.left - parentRect.left,
+      y: activeRect.top - parentRect.top,
+      width: activeRect.width,
+      height: activeRect.height,
+    };
+  },
+  { immediate: true },
+);
+
+const handleMouseEnter = (index: number) => {
+  if (props.manualMode) {
+    lastActiveIndex.value = index;
+    currentIndex.value = index;
+  }
+};
+
+const handleMouseLeave = () => {
+  if (props.manualMode) {
+    currentIndex.value = lastActiveIndex.value || 0;
+  }
+};
+
+const setWordRef = (el: HTMLSpanElement | null, index: number) => {
+  if (el) {
+    wordRefs.value[index] = el;
+  }
+};
+
+onUnmounted(() => {
+  if (interval) {
+    clearInterval(interval);
+  }
+});
+</script>
+
+<template>
+  <div class="focus-container" ref="containerRef">
+    <span
+      v-for="(word, index) in words"
+      :key="index"
+      :ref="(el) => setWordRef(el as HTMLSpanElement, index)"
+      :class="[
+        'focus-word',
+        { manual: manualMode },
+        { active: index === currentIndex && !manualMode },
+      ]"
+      :style="{
+        filter: index === currentIndex ? 'blur(0px)' : `blur(${blurAmount}px)`,
+        '--border-color': borderColor,
+        '--glow-color': glowColor,
+        transition: `filter ${animationDuration}s ease`,
+      }"
+      @mouseenter="handleMouseEnter(index)"
+      @mouseleave="handleMouseLeave"
+    >
+      {{ word }}
+    </span>
+
+    <div
+      class="focus-frame"
+      :style="{
+        '--border-color': borderColor,
+        '--glow-color': glowColor,
+        transform: `translate(${focusRect.x}px, ${focusRect.y}px)`,
+        width: `${focusRect.width}px`,
+        height: `${focusRect.height}px`,
+        opacity: currentIndex >= 0 ? 1 : 0,
+        transition: `all ${animationDuration}s ease`,
+      }"
+    >
+      <span class="top-left corner"></span>
+      <span class="top-right corner"></span>
+      <span class="bottom-left corner"></span>
+      <span class="bottom-right corner"></span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.focus-container {
+  position: relative;
+  display: flex;
+  gap: 1em;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.focus-word {
+  position: relative;
+  font-size: 3rem;
+  font-weight: 900;
+  cursor: pointer;
+  transition:
+    filter 0.3s ease,
+    color 0.3s ease;
+}
+
+.focus-word.active {
+  filter: blur(0);
+}
+
+.focus-frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  box-sizing: content-box;
+  border: none;
+}
+
+.corner {
+  position: absolute;
+  width: 1rem;
+  height: 1rem;
+  border: 3px solid var(--border-color, #fff);
+  filter: drop-shadow(0px 0px 4px var(--border-color, #fff));
+  border-radius: 3px;
+  transition: none;
+}
+
+.top-left {
+  top: -10px;
+  left: -10px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.top-right {
+  top: -10px;
+  right: -10px;
+  border-left: none;
+  border-bottom: none;
+}
+
+.bottom-left {
+  bottom: -10px;
+  left: -10px;
+  border-right: none;
+  border-top: none;
+}
+
+.bottom-right {
+  bottom: -10px;
+  right: -10px;
+  border-left: none;
+  border-top: none;
+}
+</style>
diff --git a/src/demo/TextAnimations/TrueFocusDemo.vue b/src/demo/TextAnimations/TrueFocusDemo.vue
new file mode 100644
index 0000000..cf4abb3
--- /dev/null
+++ b/src/demo/TextAnimations/TrueFocusDemo.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="truefocus-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="relative py-6 overflow-hidden demo-container" style="min-height: 200px">
+          <RefreshButton @click="forceRerender" />
+          <div :key="key" class="flex flex-col justify-center items-center m-8 pl-6 w-full">
+            <TrueFocus v-bind="config" />
+          </div>
+        </div>
+
+        <Customize>
+          <PreviewColor title="Text Color" v-model="borderColor" @update:model-value="forceRerender" />
+
+          <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="Animation Duration"
+            v-model="animationDuration"
+            :min="0.1"
+            :max="3"
+            :step="0.1"
+            value-unit="s"
+            :disabled="!manualMode"
+            @update:model-value="forceRerender"
+          />
+
+          <PreviewSlider
+            title="Pause Between Animations"
+            v-model="pauseBetweenAnimations"
+            :min="0"
+            :max="5"
+            :step="0.5"
+            value-unit="s"
+            :disabled="manualMode"
+            @update:model-value="forceRerender"
+          />
+        </Customize>
+
+        <PropTable :data="propData" />
+        <Dependencies :dependency-list="['framer-motion']" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="trueFocus" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="trueFocus.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import TabbedLayout from "../../components/common/TabbedLayout.vue";
+import PropTable from "../../components/common/PropTable.vue";
+import CliInstallation from "../../components/code/CliInstallation.vue";
+import CodeExample from "../../components/code/CodeExample.vue";
+import Dependencies from "../../components/code/Dependencies.vue";
+import Customize from "../../components/common/Customize.vue";
+import PreviewColor from "../../components/common/PreviewColor.vue";
+import PreviewSlider from "../../components/common/PreviewSlider.vue";
+import PreviewSwitch from "../../components/common/PreviewSwitch.vue";
+import RefreshButton from "../../components/common/RefreshButton.vue";
+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 manualMode = ref(false);
+const blurAmount = ref(5);
+const animationDuration = ref(0.5);
+const pauseBetweenAnimations = ref(1);
+const borderColor = ref("#5227FF");
+
+const config = computed(() => ({
+  sentence: "True Focus",
+  manualMode: manualMode.value,
+  blurAmount: blurAmount.value,
+  borderColor: borderColor.value,
+  animationDuration: animationDuration.value,
+  pauseBetweenAnimations: pauseBetweenAnimations.value,
+}));
+
+const propData = [
+  {
+    name: "sentence",
+    type: "string",
+    default: "'True Focus'",
+    description: "The text to display with the focus animation.",
+  },
+  {
+    name: "manualMode",
+    type: "boolean",
+    default: "false",
+    description: "Disables automatic animation when set to true.",
+  },
+  {
+    name: "blurAmount",
+    type: "number",
+    default: "5",
+    description: "The amount of blur applied to non-active words.",
+  },
+  {
+    name: "borderColor",
+    type: "string",
+    default: "'green'",
+    description: "The color of the focus borders.",
+  },
+  {
+    name: "glowColor",
+    type: "string",
+    default: "'rgba(0, 255, 0, 0.6)'",
+    description: "The color of the glowing effect on the borders.",
+  },
+  {
+    name: "animationDuration",
+    type: "number",
+    default: "0.5",
+    description: "The duration of the animation for each word.",
+  },
+  {
+    name: "pauseBetweenAnimations",
+    type: "number",
+    default: "1",
+    description: "Time to pause between focusing on each word (in auto mode).",
+  },
+];
+</script>
+
+<style scoped>
+.truefocus-demo {
+  width: 100%;
+}
+
+.demo-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

From d74724c136b0809c5dea29dcab96c6b8a46845d9 Mon Sep 17 00:00:00 2001
From: Utkarsh-Singhal-26 <singhalutkarsh26@gmail.com>
Date: Sat, 12 Jul 2025 09:00:15 +0530
Subject: [PATCH 2/2] Updated <TrueFocus /> text animation

---
 .../code/TextAnimations/trueFocusCode.ts      |   8 +-
 .../TextAnimations/TrueFocus/TrueFocus.vue    | 130 +++++-------------
 src/demo/TextAnimations/TrueFocusDemo.vue     |  16 +--
 3 files changed, 43 insertions(+), 111 deletions(-)

diff --git a/src/constants/code/TextAnimations/trueFocusCode.ts b/src/constants/code/TextAnimations/trueFocusCode.ts
index 4e0acc4..603d42c 100644
--- a/src/constants/code/TextAnimations/trueFocusCode.ts
+++ b/src/constants/code/TextAnimations/trueFocusCode.ts
@@ -7,11 +7,11 @@ export const trueFocus: CodeObject = {
   usage: `<template>
   <TrueFocus
     sentence="True Focus"
-    manualMode="false"
-    blurAmount="5"
+    :manualMode="false"
+    :blurAmount="5"
     borderColor="red"
-    animationDuration="2"
-    pauseBetweenAnimations="1"
+    :animationDuration="2"
+    :pauseBetweenAnimations="1"
   />
 </template>
 
diff --git a/src/content/TextAnimations/TrueFocus/TrueFocus.vue b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
index b5ebc51..6040b7e 100644
--- a/src/content/TextAnimations/TrueFocus/TrueFocus.vue
+++ b/src/content/TextAnimations/TrueFocus/TrueFocus.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref, onUnmounted, watch, nextTick, computed } from "vue";
+import { motion } from "motion-v";
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 
 interface TrueFocusProps {
   sentence?: string;
@@ -56,7 +57,7 @@ watch(
 );
 
 watch(
-  [currentIndex, words],
+  [currentIndex, words.value.length],
   async () => {
     if (currentIndex.value === null || currentIndex.value === -1) return;
     if (!wordRefs.value[currentIndex.value] || !containerRef.value) return;
@@ -95,6 +96,22 @@ const setWordRef = (el: HTMLSpanElement | null, index: number) => {
   }
 };
 
+onMounted(async () => {
+  await nextTick();
+  
+  if (wordRefs.value[0] && containerRef.value) {
+    const parentRect = containerRef.value.getBoundingClientRect();
+    const activeRect = wordRefs.value[0].getBoundingClientRect();
+
+    focusRect.value = {
+      x: activeRect.left - parentRect.left,
+      y: activeRect.top - parentRect.top,
+      width: activeRect.width,
+      height: activeRect.height,
+    };
+  }
+});
+
 onUnmounted(() => {
   if (interval) {
     clearInterval(interval);
@@ -103,16 +120,12 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="focus-container" ref="containerRef">
+  <div class="relative flex flex-wrap justify-center items-center gap-[1em]" ref="containerRef">
     <span
       v-for="(word, index) in words"
       :key="index"
       :ref="(el) => setWordRef(el as HTMLSpanElement, index)"
-      :class="[
-        'focus-word',
-        { manual: manualMode },
-        { active: index === currentIndex && !manualMode },
-      ]"
+      class="relative font-black text-5xl transition-[filter,color] duration-300 ease-in-out cursor-pointer"
       :style="{
         filter: index === currentIndex ? 'blur(0px)' : `blur(${blurAmount}px)`,
         '--border-color': borderColor,
@@ -125,94 +138,27 @@ onUnmounted(() => {
       {{ word }}
     </span>
 
-    <div
-      class="focus-frame"
+    <motion.div
+      class="top-0 left-0 box-content absolute border-none pointer-events-none"
+      :animate="{
+        x: focusRect.x,
+        y: focusRect.y,
+        width: focusRect.width,
+        height: focusRect.height,
+        opacity: currentIndex >= 0 ? 1 : 0,
+      }"
+      :transition="{
+        duration: animationDuration,
+      }"
       :style="{
         '--border-color': borderColor,
         '--glow-color': glowColor,
-        transform: `translate(${focusRect.x}px, ${focusRect.y}px)`,
-        width: `${focusRect.width}px`,
-        height: `${focusRect.height}px`,
-        opacity: currentIndex >= 0 ? 1 : 0,
-        transition: `all ${animationDuration}s ease`,
       }"
     >
-      <span class="top-left corner"></span>
-      <span class="top-right corner"></span>
-      <span class="bottom-left corner"></span>
-      <span class="bottom-right corner"></span>
-    </div>
+      <span class="top-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none"></span>
+      <span class="top-[-10px] right-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"></span>
+      <span class="bottom-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none"></span>
+      <span class="right-[-10px] bottom-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"></span>
+    </motion.div>
   </div>
 </template>
-
-<style scoped>
-.focus-container {
-  position: relative;
-  display: flex;
-  gap: 1em;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.focus-word {
-  position: relative;
-  font-size: 3rem;
-  font-weight: 900;
-  cursor: pointer;
-  transition:
-    filter 0.3s ease,
-    color 0.3s ease;
-}
-
-.focus-word.active {
-  filter: blur(0);
-}
-
-.focus-frame {
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  box-sizing: content-box;
-  border: none;
-}
-
-.corner {
-  position: absolute;
-  width: 1rem;
-  height: 1rem;
-  border: 3px solid var(--border-color, #fff);
-  filter: drop-shadow(0px 0px 4px var(--border-color, #fff));
-  border-radius: 3px;
-  transition: none;
-}
-
-.top-left {
-  top: -10px;
-  left: -10px;
-  border-right: none;
-  border-bottom: none;
-}
-
-.top-right {
-  top: -10px;
-  right: -10px;
-  border-left: none;
-  border-bottom: none;
-}
-
-.bottom-left {
-  bottom: -10px;
-  left: -10px;
-  border-right: none;
-  border-top: none;
-}
-
-.bottom-right {
-  bottom: -10px;
-  right: -10px;
-  border-left: none;
-  border-top: none;
-}
-</style>
diff --git a/src/demo/TextAnimations/TrueFocusDemo.vue b/src/demo/TextAnimations/TrueFocusDemo.vue
index cf4abb3..bef248c 100644
--- a/src/demo/TextAnimations/TrueFocusDemo.vue
+++ b/src/demo/TextAnimations/TrueFocusDemo.vue
@@ -3,7 +3,6 @@
     <TabbedLayout>
       <template #preview>
         <div class="relative py-6 overflow-hidden demo-container" style="min-height: 200px">
-          <RefreshButton @click="forceRerender" />
           <div :key="key" class="flex flex-col justify-center items-center m-8 pl-6 w-full">
             <TrueFocus v-bind="config" />
           </div>
@@ -77,7 +76,6 @@ import Customize from "../../components/common/Customize.vue";
 import PreviewColor from "../../components/common/PreviewColor.vue";
 import PreviewSlider from "../../components/common/PreviewSlider.vue";
 import PreviewSwitch from "../../components/common/PreviewSwitch.vue";
-import RefreshButton from "../../components/common/RefreshButton.vue";
 import TrueFocus from "../../content/TextAnimations/TrueFocus/TrueFocus.vue";
 import { trueFocus } from "../../constants/code/TextAnimations/trueFocusCode";
 import { useForceRerender } from "@/composables/useForceRerender";
@@ -88,7 +86,7 @@ const manualMode = ref(false);
 const blurAmount = ref(5);
 const animationDuration = ref(0.5);
 const pauseBetweenAnimations = ref(1);
-const borderColor = ref("#5227FF");
+const borderColor = ref("#27FF64");
 
 const config = computed(() => ({
   sentence: "True Focus",
@@ -144,15 +142,3 @@ const propData = [
   },
 ];
 </script>
-
-<style scoped>
-.truefocus-demo {
-  width: 100%;
-}
-
-.demo-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-</style>