Merge branch 'main' into add-scramble-text

src/constants/code/TextAnimations/blurTextCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/BlurText/BlurText.vue?raw'
-import type { CodeObject } from '../../../types/code'
+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`,
@@ -26,4 +26,4 @@ export const blurText: CodeObject = {
   };
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/circularTextCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/CircularText/CircularText.vue?raw'
-import type { CodeObject } from '../../../types/code'
+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`,
@@ -17,4 +17,4 @@ export const circularText: CodeObject = {
   import CircularText from "./CircularText.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/curvedLoopCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/CurvedLoop/CurvedLoop.vue?raw'
-import type { CodeObject } from '../../../types/code'
+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`,
@@ -17,4 +17,4 @@ export const curvedLoop: CodeObject = {
   import CurvedLoop from "./CurvedLoop.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/decryptedTextCode.ts

@@ -1,5 +1,5 @@
-import code from '@/content/TextAnimations/DecryptedText/DecryptedText.vue?raw'
-import type { CodeObject } from '@/types/code'
+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`,
@@ -21,4 +21,4 @@ export const decryptedText: CodeObject = {
   import DecryptedText from "./DecryptedText.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/fallingTextCode.ts

@@ -1,5 +1,5 @@
-import code from '@/content/TextAnimations/FallingText/FallingText.vue?raw'
-import type { CodeObject } from '@/types/code'
+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`,
@@ -19,4 +19,4 @@ export const fallingText: CodeObject = {
   import FallingText from "./FallingText.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/fuzzyTextCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/FuzzyText/FuzzyText.vue?raw'
-import type { CodeObject } from '../../../types/code'
+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`,
@@ -19,4 +19,4 @@ export const fuzzyText: CodeObject = {
   import FuzzyText from "./FuzzyText.vue";
 </script>`,
   code
-}
+};

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

src/constants/code/TextAnimations/gradientTextCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/GradientText/GradientText.vue?raw'
-import type { CodeObject } from '../../../types/code'
+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`,
@@ -17,4 +17,4 @@ export const gradientText: CodeObject = {
   import GradientText from "./GradientText.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/rotatingTextCode.ts

@@ -0,0 +1,26 @@
+import code from '@/content/TextAnimations/RotatingText/RotatingText.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const rotatingText: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/RotatingText`,
+  installation: `npm i motion-v`,
+  usage: `<template>
+    <RotatingText
+      :texts="['Vue', 'Bits', 'is', 'Cool!']"
+      mainClassName="px-2 sm:px-2 md:px-3 bg-green-300 text-black overflow-hidden py-0.5 sm:py-1 md:py-2 justify-center rounded-lg"
+      :staggerFrom="last"
+      :initial="{ y: '100%' }"
+      :animate="{ y: 0 }"
+      :exit="{ y: '-120%' }"
+      :staggerDuration="0.025"
+      splitLevelClassName="overflow-hidden pb-0.5 sm:pb-1 md:pb-1"
+      :transition="{ type: "spring", damping: 30, stiffness: 400 }"
+      :rotationInterval="2000"
+    />
+</template>
+
+<script setup lang="ts">
+  import RotatingText from "./RotatingText.vue";
+</script>`,
+  code
+};

src/constants/code/TextAnimations/scrollFloatCode.ts

@@ -0,0 +1,25 @@
+import code from '@content/TextAnimations/ScrollFloat/ScrollFloat.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const scrollFloatCode: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/ScrollFloat`,
+  usage: `<template>
+  <ScrollFloat
+    :children="scrollText"
+    :animation-duration="animationDuration"
+    :ease="ease"
+    :scroll-start="scrollStart"
+    :scroll-end="scrollEnd"
+    :stagger="stagger"
+    :container-class-name="containerClassName"
+    :text-class-name="textClassName"
+    :scroll-container-ref="{ current: containerRef }"
+    :key="rerenderKey"
+  />
+</template>
+
+<script setup lang="ts">
+  import ScrollFloat from "./ScrollFloat.vue";
+</script>`,
+  code
+};

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

src/constants/code/TextAnimations/shinyTextCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/ShinyText/ShinyText.vue?raw'
-import type { CodeObject } from '../../../types/code'
+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`,
@@ -16,4 +16,4 @@ export const shinyText: CodeObject = {
   import ShinyText from "./ShinyText.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/splitTextCode.ts

@@ -1,6 +1,6 @@
 // Fun fact: this is the first component ever made for Vue Bits!
-import code from '@content/TextAnimations/SplitText/SplitText.vue?raw'
-import type { CodeObject } from '../../../types/code'
+import code from '@content/TextAnimations/SplitText/SplitText.vue?raw';
+import type { CodeObject } from '../../../types/code';
 
 export const splitText: CodeObject = {
   cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/SplitText`,
@@ -30,4 +30,4 @@ export const splitText: CodeObject = {
   };
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/textCursorCode.ts

@@ -1,5 +1,5 @@
-import code from '@/content/TextAnimations/TextCursor/TextCursor.vue?raw'
-import type { CodeObject } from '@/types/code'
+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`,
@@ -21,4 +21,4 @@ export const textCursor: CodeObject = {
   import TextCursor from "./TextCursor.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/textPressureCode.ts

@@ -1,5 +1,5 @@
-import code from '@content/TextAnimations/TextPressure/TextPressure.vue?raw'
-import type { CodeObject } from '../../../types/code'
+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`,
@@ -22,4 +22,4 @@ export const textPressure: CodeObject = {
   import TextPressure from "./TextPressure.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/textTrailCode.ts

@@ -1,5 +1,5 @@
-import code from '@/content/TextAnimations/TextTrail/TextTrail.vue?raw'
-import type { CodeObject } from '@/types/code'
+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`,
@@ -20,4 +20,4 @@ export const textTrail: CodeObject = {
   import TextTrail from "./TextTrail.vue";
 </script>`,
   code
-}
+};

src/constants/code/TextAnimations/trueFocusCode.ts

@@ -0,0 +1,22 @@
+import code from '@/content/TextAnimations/TrueFocus/TrueFocus.vue?raw';
+import type { CodeObject } from '../../../types/code';
+
+export const trueFocus: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/TextAnimations/TrueFocus`,
+  installation: `npm install motion-v`,
+  usage: `<template>
+  <TrueFocus
+    sentence="True Focus"
+    :manualMode="false"
+    :blurAmount="5"
+    borderColor="red"
+    :animationDuration="2"
+    :pauseBetweenAnimations="1"
+  />
+</template>
+
+<script setup lang="ts">
+  import TrueFocus from "./TrueFocus.vue";
+</script>`,
+  code
+};