documentation structure

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