feat(text-animations): add GlitchText component

src/constants/Categories.ts

@@ -22,7 +22,8 @@ export const CATEGORIES = [
       'True Focus',
       'Scroll Float',
       'Scroll Reveal',
-      'Rotating Text'
+      'Rotating Text',
+      'Glitch Text'
     ]
   },
   {

src/constants/Components.ts

@@ -27,7 +27,8 @@ const textAnimations = {
   'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
   'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
   'scroll-reveal': ()=> import("../demo/TextAnimations/ScrollRevealDemo.vue"),
-  'rotating-text': ()=> import("../demo/TextAnimations/RotatingTextDemo.vue")
+  'rotating-text': ()=> import("../demo/TextAnimations/RotatingTextDemo.vue"),
+  'glitch-text': () => import("../demo/TextAnimations/GlitchTextDemo.vue"),
 };
 
 const components = {

src/constants/code/TextAnimations/glitchTextCode.ts

@@ -0,0 +1,19 @@
+import code from '@/content/TextAnimations/GlitchText/GlitchText.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const glitchText: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/GlitchText`,
+  usage: `<template>
+  <GlitchText
+    children="Vue Bits"
+    :speed="0.5"
+    :enable-shadows="true"
+    :enable-on-hover="false"
+  />
+</template>
+
+<script setup lang="ts">
+  import GlitchText from "./GlitchText.vue";
+</script>`,
+  code
+};