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

src/constants/code/TextAnimations/circularTextCode.ts

@@ -0,0 +1,20 @@
+import code from '@content/TextAnimations/CircularText/CircularText.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const circularText: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/CircularText`,
+  installation: `npm install motion-v`,
+  usage: `<template>
+  <CircularText
+    text="VUE * BITS * IS AWESOME * "
+    :spin-duration="20"
+    on-hover="speedUp"
+    class-name="text-blue-500"
+  />
+</template>
+
+<script setup lang="ts">
+  import CircularText from "./CircularText.vue";
+</script>`,
+  code
+}

src/constants/code/TextAnimations/curvedLoopCode.ts

@@ -0,0 +1,20 @@
+import code from '@content/TextAnimations/CurvedLoop/CurvedLoop.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const curvedLoop: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/CurvedLoop`,
+  usage: `<template>
+  <CurvedLoop
+    marquee-text="Be ✦ Creative ✦ With ✦ Vue ✦ Bits ✦"
+    :speed="2"
+    :curve-amount="400"
+    direction="left"
+    :interactive="true"
+  />
+</template>
+
+<script setup lang="ts">
+  import CurvedLoop from "./CurvedLoop.vue";
+</script>`,
+  code
+}

src/constants/code/TextAnimations/decryptedTextCode.ts

@@ -0,0 +1,24 @@
+import code from '@/content/TextAnimations/DecryptedText/DecryptedText.vue?raw'
+import type { CodeObject } from '@/types/code'
+
+export const decryptedText: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/DecryptedText`,
+  usage: `<template>
+  <DecryptedText
+    text="Hello World!"
+    :speed="50"
+    :max-iterations="10"
+    :sequential="false"
+    reveal-direction="start"
+    :use-original-chars-only="false"
+    animate-on="hover"
+    class-name="text-green-500"
+    encrypted-class-name="text-red-500"
+  />
+</template>
+
+<script setup lang="ts">
+  import DecryptedText from "./DecryptedText.vue";
+</script>`,
+  code
+}

src/constants/code/TextAnimations/fallingTextCode.ts

@@ -0,0 +1,22 @@
+import code from '@/content/TextAnimations/FallingText/FallingText.vue?raw'
+import type { CodeObject } from '@/types/code'
+
+export const fallingText: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/FallingText`,
+  installation: `npm install matter-js @types/matter-js`,
+  usage: `<template>
+  <FallingText
+    text="Vue Bits is awesome!"
+    :highlight-words="['Vue', 'Bits']"
+    trigger="hover"
+    :gravity="1"
+    font-size="2rem"
+    :mouse-constraint-stiffness="0.2"
+  />
+</template>
+
+<script setup lang="ts">
+  import FallingText from "./FallingText.vue";
+</script>`,
+  code
+}

src/constants/code/TextAnimations/fuzzyTextCode.ts

@@ -0,0 +1,22 @@
+import code from '@content/TextAnimations/FuzzyText/FuzzyText.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const fuzzyText: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/FuzzyText`,
+  usage: `<template>
+  <FuzzyText
+    text="404"
+    :font-size="140"
+    font-weight="900"
+    color="#fff"
+    :enable-hover="true"
+    :base-intensity="0.18"
+    :hover-intensity="0.5"
+  />
+</template>
+
+<script setup lang="ts">
+  import FuzzyText from "./FuzzyText.vue";
+</script>`,
+  code
+}

src/constants/code/TextAnimations/gradientTextCode.ts

@@ -0,0 +1,20 @@
+import code from '@content/TextAnimations/GradientText/GradientText.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const gradientText: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/GradientText`,
+  usage: `<template>
+  <GradientText
+    text="Add a splash of color!"
+    :colors="['#ffaa40', '#9c40ff', '#ffaa40']"
+    :animation-speed="8"
+    :show-border="false"
+    class-name="your-custom-class"
+  />
+</template>
+
+<script setup lang="ts">
+  import GradientText from "./GradientText.vue";
+</script>`,
+  code
+}

src/constants/code/TextAnimations/shinyTextCode.ts

@@ -0,0 +1,19 @@
+import code from '@content/TextAnimations/ShinyText/ShinyText.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const shinyText: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ShinyText`,
+  usage: `<template>
+  <ShinyText 
+    text="Just some shiny text!" 
+    :disabled="false" 
+    :speed="3" 
+    class-name="your-custom-class"
+  />
+</template>
+
+<script setup lang="ts">
+  import ShinyText from "./ShinyText.vue";
+</script>`,
+  code
+}

src/constants/code/TextAnimations/textCursorCode.ts

@@ -0,0 +1,24 @@
+import code from '@/content/TextAnimations/TextCursor/TextCursor.vue?raw'
+import type { CodeObject } from '@/types/code'
+
+export const textCursor: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/TextCursor`,
+  installation: `npm install motion-v`,
+  usage: `<template>
+  <TextCursor
+    text="⚛️"
+    :delay="0.01"
+    :spacing="100"
+    :follow-mouse-direction="true"
+    :random-float="true"
+    :exit-duration="0.5"
+    :removal-interval="30"
+    :max-points="5"
+  />
+</template>
+
+<script setup lang="ts">
+  import TextCursor from "./TextCursor.vue";
+</script>`,
+  code
+}

src/constants/code/TextAnimations/textPressureCode.ts

@@ -0,0 +1,25 @@
+import code from '@content/TextAnimations/TextPressure/TextPressure.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const textPressure: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/TextPressure`,
+  usage: `<template>
+  <TextPressure
+    text="Hello!"
+    :flex="true"
+    :alpha="false"
+    :stroke="false"
+    :width="true"
+    :weight="true"
+    :italic="true"
+    text-color="#ffffff"
+    stroke-color="#27FF64"
+    :min-font-size="36"
+  />
+</template>
+
+<script setup lang="ts">
+  import TextPressure from "./TextPressure.vue";
+</script>`,
+  code
+}

src/constants/code/TextAnimations/textTrailCode.ts

@@ -0,0 +1,23 @@
+import code from '@/content/TextAnimations/TextTrail/TextTrail.vue?raw'
+import type { CodeObject } from '@/types/code'
+
+export const textTrail: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/TextTrail`,
+  installation: `npm install three @types/three`,
+  usage: `<template>
+  <TextTrail
+    text="Vibe"
+    :noise-factor="1"
+    :noise-scale="0.0005"
+    font-weight="900"
+    :alpha-persist-factor="0.95"
+    :animate-color="false"
+    text-color="#ffffff"
+  />
+</template>
+
+<script setup lang="ts">
+  import TextTrail from "./TextTrail.vue";
+</script>`,
+  code
+}