Add Scramble Text

src/constants/Categories.ts

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

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"),
+  'scramble-text': () => import("../demo/TextAnimations/ScrambleTextDemo.vue"),
 };
 
 const components = {

src/constants/code/TextAnimations/scrambleTextCode.ts

@@ -0,0 +1,28 @@
+import code from '@content/TextAnimations/ScrambleText/ScrambleText.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const scrambleTextCode: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrambleText`,
+  installation: `npm install gsap`,
+  usage: `// Component inspired by Tom Miller from the GSAP community
+// https://codepen.io/creativeocean/pen/NPWLwJM
+
+<template>
+  <ScrambleText
+    :className="'m-[7vw] max-w-[800px] font-mono font-medium text-[clamp(14px,4vw,32px)] text-white'"
+    :radius="100"
+    :duration="1.2"
+    :speed="0.5"
+    scrambleChars=".:"
+  >
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+    Similique pariatur dignissimos porro eius quam doloremque 
+    et enim velit nobis maxime.
+  </ScrambleText>
+</template>
+
+<script setup lang="ts">
+  import ScrambleText from "./ScrambleText.vue";
+</script>`,
+  code
+}