Component Boom

src/constants/Categories.ts

@@ -8,24 +8,65 @@ export const CATEGORIES = [
     name: 'Text Animations',
     subcategories: [
       'Split Text',
+      'Blur Text',
+      'Circular Text',
+      'Shiny Text',
+      'Text Pressure',
+      'Curved Loop',
+      'Fuzzy Text',
+      'Gradient Text',
+      'Text Trail',
+      'Falling Text',
+      'Text Cursor',
+      'Decrypted Text',
     ]
   },
   {
     name: 'Animations',
     subcategories: [
+      'Animated Content',
       'Fade Content',
+      'Pixel Transition',
+      'Glare Hover',
+      'Magnet Lines',
+      'Count Up',
+      'Click Spark',
+      'Magnet',
+      'Cubes',
     ]
   },
   {
     name: 'Components',
     subcategories: [
       'Masonry',
+      'Profile Card',
+      'Dock',
+      'Gooey Nav',
+      'Pixel Card',
+      'Carousel',
+      'Spotlight Card',
+      'Flying Posters',
+      'Card Swap',
+      'Infinite Scroll',
+      'Glass Icons',
+      'Decay Card',
+      'Flowing Menu',
+      'Elastic Slider',
     ],
   },
   {
     name: 'Backgrounds',
     subcategories: [
+      'Aurora',
       'Dot Grid',
+      'Silk',
+      'Lightning',
+      'Letter Glitch',
+      'Particles',
+      'Waves',
+      'Squares',
+      'Iridescence',
+      'Threads',
     ],
   }
 ];

src/constants/Components.ts

@@ -1,17 +1,58 @@
 const animations = {
   'fade-content': () => import("../demo/Animations/FadeContentDemo.vue"),
+  'animated-content': () => import("../demo/Animations/AnimatedContentDemo.vue"),
+  'pixel-transition': () => import("../demo/Animations/PixelTransitionDemo.vue"),
+  'glare-hover': () => import("../demo/Animations/GlareHoverDemo.vue"),
+  'magnet-lines': () => import("../demo/Animations/MagnetLinesDemo.vue"),
+  'click-spark': () => import("../demo/Animations/ClickSparkDemo.vue"),
+  'magnet': () => import("../demo/Animations/MagnetDemo.vue"),
+  'cubes': () => import("../demo/Animations/CubesDemo.vue"),
+  'count-up': () => import("../demo/Animations/CountUpDemo.vue"),
 };
 
 const textAnimations = {
   'split-text': () => import("../demo/TextAnimations/SplitTextDemo.vue"),
+  'blur-text': () => import("../demo/TextAnimations/BlurTextDemo.vue"),
+  'circular-text': () => import("../demo/TextAnimations/CircularTextDemo.vue"),
+  'shiny-text': () => import("../demo/TextAnimations/ShinyTextDemo.vue"),
+  'text-pressure': () => import("../demo/TextAnimations/TextPressureDemo.vue"),
+  'curved-loop': () => import("../demo/TextAnimations/CurvedLoopDemo.vue"),
+  'fuzzy-text': () => import("../demo/TextAnimations/FuzzyTextDemo.vue"),
+  'gradient-text': () => import("../demo/TextAnimations/GradientTextDemo.vue"),
+  'text-trail': () => import("../demo/TextAnimations/TextTrailDemo.vue"),
+  'falling-text': () => import("../demo/TextAnimations/FallingTextDemo.vue"),
+  'text-cursor': () => import("../demo/TextAnimations/TextCursorDemo.vue"),
+  'decrypted-text': () => import("../demo/TextAnimations/DecryptedTextDemo.vue"),
 };
 
 const components = {
   'masonry': () => import("../demo/Components/MasonryDemo.vue"),
+  'profile-card': () => import("../demo/Components/ProfileCardDemo.vue"),
+  'dock': () => import("../demo/Components/DockDemo.vue"),
+  'gooey-nav': () => import("../demo/Components/GooeyNavDemo.vue"),
+  'pixel-card': () => import("../demo/Components/PixelCardDemo.vue"),
+  'carousel': () => import("../demo/Components/CarouselDemo.vue"),
+  'spotlight-card': () => import("../demo/Components/SpotlightCardDemo.vue"),
+  'flying-posters': () => import("../demo/Components/FlyingPostersDemo.vue"),
+  'card-swap': () => import("../demo/Components/CardSwapDemo.vue"),
+  'infinite-scroll': () => import("../demo/Components/InfiniteScrollDemo.vue"),
+  'glass-icons': () => import("../demo/Components/GlassIconsDemo.vue"),
+  'decay-card': () => import("../demo/Components/DecayCardDemo.vue"),
+  'flowing-menu': () => import("../demo/Components/FlowingMenuDemo.vue"),
+  'elastic-slider': () => import("../demo/Components/ElasticSliderDemo.vue"),
 };
 
 const backgrounds = {
   'dot-grid': () => import("../demo/Backgrounds/DotGridDemo.vue"),
+  'silk': () => import("../demo/Backgrounds/SilkDemo.vue"),
+  'lightning': () => import("../demo/Backgrounds/LightningDemo.vue"),
+  'letter-glitch': () => import("../demo/Backgrounds/LetterGlitchDemo.vue"),
+  'particles': () => import("../demo/Backgrounds/ParticlesDemo.vue"),
+  'waves': () => import("../demo/Backgrounds/WavesDemo.vue"),
+  'squares': () => import("../demo/Backgrounds/SquaresDemo.vue"),
+  'iridescence': () => import("../demo/Backgrounds/IridescenceDemo.vue"),
+  'threads': () => import("../demo/Backgrounds/ThreadsDemo.vue"),
+  'aurora': () => import("../demo/Backgrounds/AuroraDemo.vue"),
 };
 
 export const componentMap = {

src/constants/code/Animations/animatedContentCode.ts

@@ -0,0 +1,35 @@
+import code from '@/content/Animations/AnimatedContent/AnimatedContent.vue?raw'
+import type { CodeObject } from '@/types/code'
+
+export const animatedContent: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/AnimatedContent`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <AnimatedContent
+    :distance="100"
+    direction="vertical"
+    :reverse="false"
+    :duration="0.8"
+    ease="power3.out"
+    :initial-opacity="0"
+    :animate-opacity="true"
+    :scale="1"
+    :threshold="0.1"
+    :delay="0"
+    @complete="handleComplete"
+  >
+    <div class="your-content">
+      Content to animate
+    </div>
+  </AnimatedContent>
+</template>
+
+<script setup lang="ts">
+  import AnimatedContent from "./AnimatedContent.vue";
+  
+  const handleComplete = () => {
+    console.log("Animation completed!");
+  };
+</script>`,
+  code
+}

src/constants/code/Animations/clickSparkCode.ts

@@ -0,0 +1,47 @@
+import code from '@content/Animations/ClickSpark/ClickSpark.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const clickSpark: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/ClickSpark`,
+  usage: `<template>
+  <ClickSpark
+    spark-color="#ff6b6b"
+    :spark-size="12"
+    :spark-radius="25"
+    :spark-count="12"
+    :duration="600"
+    easing="ease-out"
+    :extra-scale="1.2"
+    class="interactive-area"
+  >
+    <div class="content">
+      <h3>Click me!</h3>
+      <p>Click anywhere to create sparks</p>
+    </div>
+  </ClickSpark>
+</template>
+
+<script setup lang="ts">
+import ClickSpark from '@/content/Animations/ClickSpark/ClickSpark.vue'
+</script>
+
+<style scoped>
+.interactive-area {
+  width: 100%;
+  height: 200px;
+  border: 2px dashed #333;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.content {
+  text-align: center;
+  pointer-events: none;
+  user-select: none;
+}
+</style>`,
+  code
+}

src/constants/code/Animations/countUpCode.ts

@@ -0,0 +1,33 @@
+import code from '@/content/Animations/CountUp/CountUp.vue?raw'
+import type { CodeObject } from '@/types/code'
+
+export const countup: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/CountUp`,
+  usage: `<template>
+  <CountUp
+    :from="0"
+    :to="100"
+    separator=","
+    direction="up"
+    :duration="1"
+    :delay="0"
+    :start-when="true"
+    class-name="count-up-text"
+    @start="handleStart"
+    @end="handleEnd"
+  />
+</template>
+
+<script setup lang="ts">
+  import CountUp from "./CountUp.vue";
+  
+  const handleStart = () => {
+    console.log("Count animation started!");
+  };
+  
+  const handleEnd = () => {
+    console.log("Count animation ended!");
+  };
+</script>`,
+  code
+}

src/constants/code/Animations/cubesCode.ts

@@ -0,0 +1,32 @@
+import code from '@content/Animations/Cubes/Cubes.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const cubes: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/Cubes`,
+  installation: `npm install gsap`,
+  usage: `// CREDIT
+// Component inspired from Can Tastemel's original work for the lambda.ai landing page
+// https://cantastemel.com
+
+<template>
+  <Cubes 
+    :grid-size="10"
+    :max-angle="45"
+    :radius="3"
+    easing="power3.out"
+    :duration="{ enter: 0.3, leave: 0.6 }"
+    border-style="1px solid #fff"
+    face-color="#060010"
+    :shadow="false"
+    :auto-animate="true"
+    :ripple-on-click="true"
+    ripple-color="#fff"
+    :ripple-speed="2"
+  />
+</template>
+
+<script setup lang="ts">
+  import Cubes from "./Cubes.vue";
+</script>`,
+  code
+}

src/constants/code/Animations/glareHoverCode.ts

@@ -0,0 +1,29 @@
+import code from '@/content/Animations/GlareHover/GlareHover.vue?raw'
+import type { CodeObject } from '@/types/code'
+
+export const glareHover: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/GlareHover`,
+  usage: `<template>
+  <GlareHover
+    width="400px"
+    height="300px"
+    background="#060010"
+    border-color="#271E37"
+    border-radius="20px"
+    glare-color="#ffffff"
+    :glare-opacity="0.3"
+    :glare-size="300"
+    :transition-duration="800"
+    :play-once="false"
+  >
+    <div class="text-center text-5xl font-black text-white">
+      Hover Me
+    </div>
+  </GlareHover>
+</template>
+
+<script setup lang="ts">
+  import GlareHover from "./GlareHover.vue";
+</script>`,
+  code
+}

src/constants/code/Animations/magnetCode.ts

@@ -0,0 +1,48 @@
+import code from '@content/Animations/Magnet/Magnet.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const magnet: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/Magnet`,
+  usage: `<template>
+  <Magnet
+    :padding="120"
+    :disabled="false"
+    :magnet-strength="3"
+    active-transition="transform 0.2s ease-out"
+    inactive-transition="transform 0.6s ease-in-out"
+    wrapper-class-name="custom-wrapper"
+    inner-class-name="custom-inner"
+  >
+    <div class="magnet-element">
+      <h3>Hover me!</h3>
+      <p>I'll follow your cursor</p>
+    </div>
+  </Magnet>
+</template>
+
+<script setup lang="ts">
+import Magnet from '@/content/Animations/Magnet/Magnet.vue'
+</script>
+
+<style scoped>
+.magnet-element {
+  padding: 2rem;
+  background: #060010;
+  border: 1px solid #333;
+  border-radius: 12px;
+  color: white;
+  text-align: center;
+}
+
+.magnet-element h3 {
+  margin: 0 0 0.5rem 0;
+  font-size: 1.25rem;
+}
+
+.magnet-element p {
+  margin: 0;
+  opacity: 0.8;
+}
+</style>`,
+  code
+}

src/constants/code/Animations/magnetLinesCode.ts

@@ -0,0 +1,22 @@
+import code from '@/content/Animations/MagnetLines/MagnetLines.vue?raw'
+import type { CodeObject } from '@/types/code'
+
+export const magnetLines: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/MagnetLines`,
+  usage: `<template>
+  <MagnetLines 
+    :rows="10" 
+    :columns="12" 
+    container-size="40vmin" 
+    line-color="#efefef"
+    line-width="2px" 
+    line-height="30px"
+    :base-angle="-10"
+  />
+</template>
+
+<script setup lang="ts">
+  import MagnetLines from "./MagnetLines.vue";
+</script>`,
+  code
+}

src/constants/code/Animations/pixelTransitionCode.ts

@@ -0,0 +1,29 @@
+import code from '@/content/Animations/PixelTransition/PixelTransition.vue?raw'
+import type { CodeObject } from '@/types/code'
+
+export const pixelTransition: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Animations/PixelTransition`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <PixelTransition
+    :grid-size="8"
+    pixel-color="#ffffff"
+    :animation-step-duration="0.4"
+    class-name="custom-pixel-card"
+  >
+    <template #firstContent>
+      <img src="..." alt="Default" style="width: 100%; height: 100%; object-fit: cover;" />
+    </template>
+    <template #secondContent>
+      <div style="width: 100%; height: 100%; display: grid; place-items: center; background-color: #111;">
+        <p style="font-weight: 900; font-size: 3rem; color: #fff;">Meow!</p>
+      </div>
+    </template>
+  </PixelTransition>
+</template>
+
+<script setup lang=\"ts\">
+  import PixelTransition from './PixelTransition.vue';
+</script>`,
+  code
+}

src/constants/code/Backgrounds/auroraCode.ts

@@ -0,0 +1,33 @@
+import code from '@content/Backgrounds/Aurora/Aurora.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const aurora: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Aurora`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div class="aurora-container">
+    <Aurora
+      :color-stops="['#7cff67', '#171D22', '#7cff67']"
+      :amplitude="1.0"
+      :blend="0.5"
+      :speed="1.0"
+      :intensity="1.0"
+      class="w-full h-full"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Aurora from "./Aurora.vue";
+</script>
+
+<style scoped>
+  .aurora-container {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+</style>`,
+  code
+}

src/constants/code/Backgrounds/iridescenceCode.ts

@@ -0,0 +1,22 @@
+import code from '@content/Backgrounds/Iridescence/Iridescence.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const iridescence: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Iridescence`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div class="w-full h-[400px]">
+    <Iridescence 
+      :color="[1, 1, 1]"
+      :speed="1.0"
+      :amplitude="0.1"
+      :mouseReact="true"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Iridescence from "./Iridescence.vue";
+</script>`,
+  code
+}

src/constants/code/Backgrounds/letterGlitchCode.ts

@@ -0,0 +1,32 @@
+import code from '@content/Backgrounds/LetterGlitch/LetterGlitch.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const letterGlitch: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/LetterGlitch`,
+  usage: `<template>
+  <div class="letter-glitch-container">
+    <LetterGlitch
+      :glitch-colors="['#2b4539', '#61dca3', '#61b3dc']"
+      :glitch-speed="50"
+      :center-vignette="false"
+      :outer-vignette="false"
+      :smooth="true"
+      class="w-full h-full"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import LetterGlitch from "./LetterGlitch.vue";
+</script>
+
+<style scoped>
+  .letter-glitch-container {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+</style>`,
+  code
+}

src/constants/code/Backgrounds/lightningCode.ts

@@ -0,0 +1,33 @@
+import code from '@content/Backgrounds/Lightning/Lightning.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const lightning: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Lightning`,
+  installation: `No additional dependencies required`,
+  usage: `<template>
+  <div class="lightning-container">
+    <Lightning
+      :hue="230"
+      :x-offset="0"
+      :speed="1"
+      :intensity="1"
+      :size="1"
+      class="w-full h-full"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Lightning from "./Lightning.vue";
+</script>
+
+<style scoped>
+  .lightning-container {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+</style>`,
+  code
+}

src/constants/code/Backgrounds/particlesCode.ts

@@ -0,0 +1,39 @@
+import code from '@content/Backgrounds/Particles/Particles.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const particles: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Particles`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div class="particles-container">
+    <Particles
+      :particle-count="200"
+      :particle-spread="10"
+      :speed="0.1"
+      :particle-colors="['#ffffff']"
+      :move-particles-on-hover="false"
+      :particle-hover-factor="1"
+      :alpha-particles="false"
+      :particle-base-size="100"
+      :size-randomness="1"
+      :camera-distance="20"
+      :disable-rotation="false"
+      class="w-full h-full"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Particles from "./Particles.vue";
+</script>
+
+<style scoped>
+  .particles-container {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+</style>`,
+  code
+}

src/constants/code/Backgrounds/silkCode.ts

@@ -0,0 +1,33 @@
+import code from '@content/Backgrounds/Silk/Silk.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const silk: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Silk`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div class="silk-container">
+    <Silk
+      :speed="5"
+      :scale="1"
+      :color="'#7B7481'"
+      :noise-intensity="1.5"
+      :rotation="0"
+      class="w-full h-full"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Silk from "./Silk.vue";
+</script>
+
+<style scoped>
+  .silk-container {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+</style>`,
+  code
+}

src/constants/code/Backgrounds/squaresCode.ts

@@ -0,0 +1,22 @@
+import code from '@content/Backgrounds/Squares/Squares.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const squares: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Squares`,
+  usage: `<template>
+  <div class="w-full h-[400px]">
+    <Squares 
+      direction="diagonal"
+      :speed="1"
+      :squareSize="40"
+      borderColor="#999"
+      hoverFillColor="#222"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Squares from "./Squares.vue";
+</script>`,
+  code
+}

src/constants/code/Backgrounds/threadsCode.ts

@@ -0,0 +1,22 @@
+import code from '@content/Backgrounds/Threads/Threads.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const threads: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Threads`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <div class="w-full h-[400px]">
+    <Threads 
+      :color="[1, 1, 1]"
+      :amplitude="1"
+      :distance="0"
+      :enableMouseInteraction="false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Threads from "./Threads.vue";
+</script>`,
+  code
+}

src/constants/code/Backgrounds/wavesCode.ts

@@ -0,0 +1,38 @@
+import code from '@content/Backgrounds/Waves/Waves.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const waves: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Backgrounds/Waves`,
+  usage: `<template>
+  <div class="waves-container">
+    <Waves
+      line-color="black"
+      background-color="transparent"
+      :wave-speed-x="0.0125"
+      :wave-speed-y="0.005"
+      :wave-amp-x="32"
+      :wave-amp-y="16"
+      :x-gap="10"
+      :y-gap="32"
+      :friction="0.925"
+      :tension="0.005"
+      :max-cursor-move="100"
+      class="w-full h-full"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import Waves from "./Waves.vue";
+</script>
+
+<style scoped>
+  .waves-container {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+</style>`,
+  code
+}

src/constants/code/Components/cardSwapCode.ts

@@ -0,0 +1,54 @@
+import code from '@content/Components/CardSwap/CardSwap.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const cardSwap: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/CardSwap`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <CardSwap 
+    :card-distance="60"
+    :vertical-distance="70"
+    :delay="5000"
+    :skew-amount="6"
+    easing="elastic"
+    :pause-on-hover="false"
+    @card-click="handleCardClick"
+  >
+    <template #card-0>
+      <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
+        <div class="m-2 flex items-center">
+          <i class="pi pi-circle-fill mr-2"></i>
+          <span>Smooth</span>
+        </div>
+      </div>
+    </template>
+    
+    <template #card-1>
+      <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
+        <div class="m-2 flex items-center">
+          <i class="pi pi-code mr-2"></i>
+          <span>Reliable</span>
+        </div>
+      </div>
+    </template>
+    
+    <template #card-2>
+      <div class="border-b border-white bg-gradient-to-t from-[#222] to-[#0b0b0b]">
+        <div class="m-2 flex items-center">
+          <i class="pi pi-sliders-h mr-2"></i>
+          <span>Customizable</span>
+        </div>
+      </div>
+    </template>
+  </CardSwap>
+</template>
+
+<script setup lang="ts">
+  import CardSwap from "./CardSwap.vue";
+
+  const handleCardClick = (index: number) => {
+    console.log(\`Card \${index} clicked\`);
+  };
+</script>`,
+  code
+}

src/constants/code/Components/carouselCode.ts

@@ -0,0 +1,40 @@
+import code from '@content/Components/Carousel/Carousel.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const carousel: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Carousel`,
+  installation: `npm install motion-v`,
+  usage: `<template>
+  <Carousel 
+    :items="carouselItems"
+    :base-width="300"
+    :autoplay="true"
+    :autoplay-delay="3000"
+    :pause-on-hover="true"
+    :loop="true"
+    :round="false"
+  />
+</template>
+
+<script setup lang="ts">
+  import Carousel from "./Carousel.vue";
+  import type { CarouselItem } from "./Carousel.vue";
+
+  const carouselItems: CarouselItem[] = [
+    {
+      title: "Custom Item",
+      description: "A custom carousel item.",
+      id: 1,
+      icon: "circle",
+    },
+    {
+      title: "Another Item",
+      description: "Another carousel item.",
+      id: 2,
+      icon: "layers",
+    },
+    // Add more items as needed
+  ];
+</script>`,
+  code
+}

src/constants/code/Components/decayCardCode.ts

@@ -0,0 +1,23 @@
+import code from '@content/Components/DecayCard/DecayCard.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const decayCard: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/DecayCard`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <DecayCard
+    :width="300"
+    :height="400"
+    image="https://picsum.photos/300/400?grayscale"
+  >
+    <div style="mix-blend-mode: overlay;">
+      Decay<br />Card
+    </div>
+  </DecayCard>
+</template>
+
+<script setup lang="ts">
+  import DecayCard from "./DecayCard.vue";
+</script>`,
+  code
+}

src/constants/code/Components/dockCode.ts

@@ -0,0 +1,47 @@
+import code from '@content/Components/Dock/Dock.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const dock: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/Dock`,
+  installation: `npm install motion-v`,
+  usage: `<template>
+  <Dock
+    :items="items"
+    :panel-height="68"
+    :base-item-size="50"
+    :magnification="70"
+    :distance="200"
+    :dock-height="256"
+    :spring="{ mass: 0.1, stiffness: 150, damping: 12 }"
+  />
+</template>
+
+<script setup lang="ts">
+  import { h } from 'vue'
+  import Dock from "./Dock.vue";
+
+  const items = [
+    { 
+      icon: () => h('i', { class: 'pi pi-home', style: { fontSize: '18px', color: 'white' } }), 
+      label: 'Home', 
+      onClick: () => console.log('Home clicked!') 
+    },
+    { 
+      icon: () => h('i', { class: 'pi pi-inbox', style: { fontSize: '18px', color: 'white' } }), 
+      label: 'Archive', 
+      onClick: () => console.log('Archive clicked!') 
+    },
+    { 
+      icon: () => h('i', { class: 'pi pi-user', style: { fontSize: '18px', color: 'white' } }), 
+      label: 'Profile', 
+      onClick: () => console.log('Profile clicked!') 
+    },
+    { 
+      icon: () => h('i', { class: 'pi pi-cog', style: { fontSize: '18px', color: 'white' } }), 
+      label: 'Settings', 
+      onClick: () => console.log('Settings clicked!') 
+    },
+  ];
+</script>`,
+  code
+}

src/constants/code/Components/elasticSliderCode.ts

@@ -0,0 +1,30 @@
+import code from '@content/Components/ElasticSlider/ElasticSlider.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const elasticSlider: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ElasticSlider`,
+  usage: `<template>  
+  <ElasticSlider 
+    :default-value="75"
+    :starting-value="0"
+    :max-value="100"
+    :is-stepped="true"
+    :step-size="5"
+  />
+  
+  <!-- With custom icons using slots -->
+  <ElasticSlider>
+    <template #left-icon>
+      <i class="pi pi-minus text-xl"></i>
+    </template>
+    <template #right-icon>
+      <i class="pi pi-plus text-xl"></i>
+    </template>
+  </ElasticSlider>
+</template>
+
+<script setup lang="ts">
+  import ElasticSlider from "./ElasticSlider.vue";
+</script>`,
+  code
+}

src/constants/code/Components/flowingMenuCode.ts

@@ -0,0 +1,22 @@
+import code from '@content/Components/FlowingMenu/FlowingMenu.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const flowingMenu: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/FlowingMenu`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <FlowingMenu :items="items" />
+</template>
+
+<script setup lang="ts">
+  import FlowingMenu from "./FlowingMenu.vue";
+
+  const items = [
+    { link: '#', text: 'Mojave', image: 'https://picsum.photos/600/400?random=1' },
+    { link: '#', text: 'Sonoma', image: 'https://picsum.photos/600/400?random=2' },
+    { link: '#', text: 'Monterey', image: 'https://picsum.photos/600/400?random=3' },
+    { link: '#', text: 'Sequoia', image: 'https://picsum.photos/600/400?random=4' }
+  ];
+</script>`,
+  code
+}

src/constants/code/Components/flyingPostersCode.ts

@@ -0,0 +1,37 @@
+import code from '@content/Components/FlyingPosters/FlyingPosters.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const flyingPosters: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/FlyingPosters`,
+  installation: `npm install ogl`,
+  usage: `<template>
+  <FlyingPosters 
+    :items="posterImages"
+    :plane-width="320"
+    :plane-height="320"
+    :distortion="3"
+    :scroll-ease="0.01"
+    :camera-fov="45"
+    :camera-z="20"
+    class="h-full w-full"
+  />
+</template>
+
+<script setup lang="ts">
+  import FlyingPosters from "./FlyingPosters.vue";
+
+  const posterImages = [
+  'https://picsum.photos/800/800?grayscale&random=1',
+  'https://picsum.photos/800/800?grayscale&random=2',
+  'https://picsum.photos/800/800?grayscale&random=3',
+  'https://picsum.photos/800/800?grayscale&random=4',
+  'https://picsum.photos/800/800?grayscale&random=5',
+  'https://picsum.photos/800/800?grayscale&random=6',
+  'https://picsum.photos/800/800?grayscale&random=7',
+  'https://picsum.photos/800/800?grayscale&random=8',
+  'https://picsum.photos/800/800?grayscale&random=9',
+  'https://picsum.photos/800/800?grayscale&random=10',
+  ];
+</script>`,
+  code
+}

src/constants/code/Components/glassIconsCode.ts

@@ -0,0 +1,23 @@
+import code from '@content/Components/GlassIcons/GlassIcons.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const glassIcons: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/GlassIcons`,
+  usage: `<template>
+  <GlassIcons :items="items" class="my-glass-icons" />
+</template>
+
+<script setup lang="ts">
+  import GlassIcons from "./GlassIcons.vue";
+
+  const items = [
+    { icon: 'pi pi-file', color: 'blue', label: 'Files' },
+    { icon: 'pi pi-book', color: 'purple', label: 'Books' },
+    { icon: 'pi pi-heart', color: 'red', label: 'Health' },
+    { icon: 'pi pi-cloud', color: 'indigo', label: 'Weather' },
+    { icon: 'pi pi-pencil', color: 'orange', label: 'Notes' },
+    { icon: 'pi pi-chart-bar', color: 'green', label: 'Stats' }
+  ];
+</script>`,
+  code
+}

src/constants/code/Components/gooeyNavCode.ts

@@ -0,0 +1,40 @@
+import code from '@content/Components/GooeyNav/GooeyNav.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const gooeyNav: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/GooeyNav`,
+  usage: `<template>
+  <GooeyNav
+    :items="navItems"
+    :animation-time="600"
+    :particle-count="15"
+    :particle-distances="[90, 10]"
+    :particle-r="100"
+    :time-variance="300"
+    :colors="[1, 2, 3, 1, 2, 3, 1, 4]"
+    :initial-active-index="0"
+  />
+</template>
+
+<script setup lang="ts">
+  import GooeyNav from "./GooeyNav.vue";
+
+  const navItems = [
+    { label: "Home", href: "/" },
+    { label: "About", href: "/about" },
+    { label: "Services", href: "/services" },
+    { label: "Contact", href: "/contact" },
+  ];
+</script>
+
+<style>
+  /* Add these CSS custom properties to your global styles */
+  :root {
+    --color-1: #ff6b6b;
+    --color-2: #4ecdc4;
+    --color-3: #45b7d1;
+    --color-4: #f9ca24;
+  }
+</style>`,
+  code
+}

src/constants/code/Components/infiniteScrollCode.ts

@@ -0,0 +1,34 @@
+import code from '@content/Components/InfiniteScroll/InfiniteScroll.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const infiniteScroll: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/InfiniteScroll`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <InfiniteScroll
+    :items="items"
+    width="30rem"
+    max-height="100%"
+    :item-min-height="150"
+    :is-tilted="false"
+    tilt-direction="left"
+    :autoplay="false"
+    :autoplay-speed="0.5"
+    autoplay-direction="down"
+    :pause-on-hover="false"
+    negative-margin="-0.5em"
+  />
+</template>
+
+<script setup lang="ts">
+  import InfiniteScroll from "./InfiniteScroll.vue";
+
+  const items = [
+    { content: "Item 1" },
+    { content: "Item 2" },
+    { content: "Item 3" },
+    // Add more items as needed
+  ];
+</script>`,
+  code
+}

src/constants/code/Components/pixelCardCode.ts

@@ -0,0 +1,21 @@
+import code from '@content/Components/PixelCard/PixelCard.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const pixelCard: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/PixelCard`,
+  usage: `<template>
+  <PixelCard 
+    variant="default" 
+    :gap="5"
+    :speed="35"
+    colors="#f8fafc,#f1f5f9,#cbd5e1"
+    :no-focus="false"
+    class-name="custom-class"
+  ></PixelCard>
+</template>
+
+<script setup lang="ts">
+  import PixelCard from "./PixelCard.vue";
+</script>`,
+  code
+}

src/constants/code/Components/profileCardCode.ts

@@ -0,0 +1,31 @@
+import code from '@content/Components/ProfileCard/ProfileCard.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const profileCard: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/ProfileCard`,
+  usage: `<template>
+  <ProfileCard
+    name="Javi A. Torres"
+    title="Software Engineer"
+    handle="javicodes"
+    status="Online"
+    contact-text="Contact Me"
+    avatar-url="/assets/person.png"
+    icon-url="/assets/iconpattern.png"
+    grain-url="/assets/grain.webp"
+    :show-user-info="true"
+    :show-behind-gradient="true"
+    :enable-tilt="true"
+    @contact-click="handleContactClick"
+  />
+</template>
+
+<script setup lang="ts">
+  import ProfileCard from "./ProfileCard.vue";
+
+  const handleContactClick = () => {
+    console.log('Contact button clicked!');
+  };
+</script>`,
+  code
+}

src/constants/code/Components/spotlightCardCode.ts

@@ -0,0 +1,19 @@
+import code from '@content/Components/SpotlightCard/SpotlightCard.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const spotlightCard: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/SpotlightCard`,
+  usage: `<template>
+  <SpotlightCard 
+    class-name="custom-spotlight-card"
+    spotlight-color="rgba(255, 255, 255, 0.25)"
+  >
+    <-!-- Content inside the card -->
+  </SpotlightCard>
+</template>
+
+<script setup lang="ts">
+  import SpotlightCard from "./SpotlightCard.vue";
+</script>`,
+  code
+}

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