documentation structure

src/content/Backgrounds/DotGrid/DotGrid.vue

@@ -51,8 +51,8 @@ export interface DotGridProps {
 const props = withDefaults(defineProps<DotGridProps>(), {
   dotSize: 16,
   gap: 32,
-  baseColor: '#5227FF',
-  activeColor: '#5227FF',
+  baseColor: '#27FF64',
+  activeColor: '#27FF64',
   proximity: 150,
   speedTrigger: 100,
   shockRadius: 250,

src/content/Backgrounds/Squares/Squares.vue

@@ -84,7 +84,7 @@ const drawGrid = () => {
     Math.sqrt(canvas.width ** 2 + canvas.height ** 2) / 2
   )
   gradient.addColorStop(0, "rgba(0, 0, 0, 0)")
-  gradient.addColorStop(1, "#0e0e0e")
+  gradient.addColorStop(1, "#0b0b0b")
 
   ctx.fillStyle = gradient
   ctx.fillRect(0, 0, canvas.width, canvas.height)

src/content/TextAnimations/SplitText/SplitText.vue

@@ -47,6 +47,10 @@ const props = withDefaults(defineProps<SplitTextProps>(), {
   textAlign: 'center'
 })
 
+const emit = defineEmits<{
+  'animation-complete': []
+}>()
+
 const textRef = ref<HTMLParagraphElement | null>(null)
 const animationCompletedRef = ref(false)
 const scrollTriggerRef = ref<ScrollTrigger | null>(null)
@@ -130,6 +134,7 @@ const initializeAnimation = async () => {
         immediateRender: true,
       })
       props.onLetterAnimationComplete?.()
+      emit('animation-complete')
     },
   })