documentation structure

src/constants/code/Animations/fadeContentCode.ts

@@ -0,0 +1,27 @@
+import code from '@content/Animations/FadeContent/FadeContent.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const fadeContent: CodeObject = {
+  cli: `npx jsrepo add https://vuebits.dev/Animations/FadeContent`,
+  usage: `<template>
+  <FadeContent
+    :blur="true"
+    :duration="1000"
+    :delay="200"
+    :threshold="0.1"
+    :initial-opacity="0"
+    easing="ease-out"
+    class-name="my-fade-content"
+  >
+    <div class="content-to-fade">
+      <h2>This content will fade in!</h2>
+      <p>It appears when scrolled into view.</p>
+    </div>
+  </FadeContent>
+</template>
+
+<script setup lang="ts">
+  import FadeContent from "./FadeContent.vue";
+</script>`,
+  code
+}

src/constants/code/Backgrounds/dotGridCode.ts

@@ -0,0 +1,39 @@
+import code from '@content/Backgrounds/DotGrid/DotGrid.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const dotGrid: CodeObject = {
+  cli: `npx jsrepo add https://vuebits.dev/Backgrounds/DotGrid`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <div class="dot-grid-container">
+    <DotGrid
+      :dot-size="16"
+      :gap="32"
+      base-color="#27FF64"
+      active-color="#27FF64"
+      :proximity="150"
+      :speed-trigger="100"
+      :shock-radius="250"
+      :shock-strength="5"
+      :max-speed="5000"
+      :resistance="750"
+      :return-duration="1.5"
+      class-name="custom-dot-grid"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import DotGrid from "./DotGrid.vue";
+</script>
+
+<style scoped>
+  .dot-grid-container {
+    width: 100%;
+    height: 500px;
+    position: relative;
+    overflow: hidden;
+  }
+</style>`,
+  code
+}

src/constants/code/TextAnimations/splitTextCode.ts

@@ -0,0 +1,33 @@
+// 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'
+
+export const splitText: CodeObject = {
+  cli: `npx jsrepo add https://vuebits.dev/TextAnimations/SplitText`,
+  installation: `npm install gsap`,
+  usage: `<template>
+  <SplitText
+    text="Hello, GSAP!"
+    class-name="text-2xl font-semibold text-center"
+    :delay="100"
+    :duration="0.6"
+    ease="power3.out"
+    split-type="chars"
+    :from="{ opacity: 0, y: 40 }"
+    :to="{ opacity: 1, y: 0 }"
+    :threshold="0.1"
+    root-margin="-100px"
+    text-align="center"
+    @animation-complete="handleAnimationComplete"
+  />
+</template>
+
+<script setup lang="ts">
+  import SplitText from "./SplitText.vue";
+
+  const handleAnimationComplete = () => {
+    console.log('All letters have animated!');
+  };
+</script>`,
+  code
+}