Create <TrueFocus /> text animation

src/constants/Categories.ts

@@ -19,6 +19,7 @@ export const CATEGORIES = [
       'Falling Text',
       'Text Cursor',
       'Decrypted Text',
+      'True Focus'
     ]
   },
   {

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 = {

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,
+};