Component Boom

src/constants/code/TextAnimations/blurTextCode.ts

@@ -0,0 +1,29 @@
+import code from '@content/TextAnimations/BlurText/BlurText.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const blurText: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/BlurText`,
+  installation: `npm install motion-v`,
+  usage: `<template>
+  <BlurText
+    text="Isn't this so cool?!"
+    :delay="200"
+    class-name="text-2xl font-semibold text-center"
+    animate-by="words"
+    direction="top"
+    :threshold="0.1"
+    root-margin="0px"
+    :step-duration="0.35"
+    @animation-complete="handleAnimationComplete"
+  />
+</template>
+
+<script setup lang="ts">
+  import BlurText from "./BlurText.vue";
+
+  const handleAnimationComplete = () => {
+    console.log('All animations complete!');
+  };
+</script>`,
+  code
+}