Component Boom

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