Scroll Reveal added to text animations

Signed-off-by: zubairrafi <walleeva2018@gmail.com>

src/constants/Categories.ts

@@ -21,6 +21,7 @@ export const CATEGORIES = [
       'Decrypted Text',
       'True Focus',
       'Scroll Float',
+      'Scroll Reveal',
     ]
   },
   {

src/constants/Components.ts

@@ -25,8 +25,9 @@ const textAnimations = {
   'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
   'true-focus': () => import("../demo/TextAnimations/TrueFocusDemo.vue"),
   'scroll-float': () => import("../demo/TextAnimations/ScrollFloatDemo.vue"),
+  'scroll-reveal': ()=> import("../demo/TextAnimations/ScrollRevealDemo.vue"),
 };
-
+ 
 const components = {
   'masonry': () => import("../demo/Components/MasonryDemo.vue"),
   'profile-card': () => import("../demo/Components/ProfileCardDemo.vue"),

src/constants/code/TextAnimations/scrollRevealCode.ts

@@ -0,0 +1,26 @@
+import code from '@content/TextAnimations/ScrollReveal/ScrollReveal.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const scrollRevealCode: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollReveal`,
+  usage: `<template>
+    <ScrollReveal
+      :children="scrollText"
+      :enable-blur="enableBlur"
+      :base-opacity="baseOpacity"
+      :base-rotation="baseRotation"
+      :blur-strength="blurStrength"
+      :container-class-name="containerClassName"
+      :text-class-name="textClassName"
+      :rotation-end="rotationEnd"
+      :word-animation-end="wordAnimationEnd"
+      :scroll-container-ref="{ current: containerRef }"
+      :key="rerenderKey"
+    />
+</template>
+
+<script setup lang="ts">
+  import ScrollReveal from "./ScrollReveal.vue";
+</script>`,
+  code
+}