Merge branch 'main' into add-ascii-texts

src/constants/Categories.ts

@@ -20,6 +20,7 @@ export const CATEGORIES = [
       'Text Cursor',
       'Decrypted Text',
       'Ascii Text',
+      'Scramble Text',
       'True Focus',
       'Scroll Float',
       'Scroll Reveal',

src/constants/Components.ts

@@ -27,6 +27,7 @@ const textAnimations = {
   'text-cursor': () => import("../demo/TextAnimations/TextCursorDemo.vue"),
   'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
   'ascii-text': () => import("../demo/TextAnimations/AsciiTextDemo.vue"),
+  'scramble-text': () => import("../demo/TextAnimations/ScrambleTextDemo.vue"),
   'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
   'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
   'scroll-reveal': ()=> import("../demo/TextAnimations/ScrollRevealDemo.vue"),

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