[ FIX ] : Build Errors

src/content/TextAnimations/DecryptedText/DecryptedText.vue

@@ -40,7 +40,7 @@ const isScrambling = ref(false);
 const revealedIndices = ref(new Set<number>());
 const hasAnimated = ref(false);
 
-let interval: number | null = null;
+let interval: ReturnType<typeof setInterval> | null = null;
 let intersectionObserver: IntersectionObserver | null = null;
 
 watch(

src/content/TextAnimations/RotatingText/RotatingText.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
-import { AnimatePresence, Motion, type Target, type Transition, type VariantLabels } from 'motion-v';
+import { AnimatePresence, Motion } from 'motion-v';
+import type { MotionProps } from 'motion-v';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 type StaggerFrom = 'first' | 'last' | 'center' | 'random' | number;
 type SplitBy = 'characters' | 'words' | 'lines';
 
+type TransitionType = NonNullable<MotionProps['transition']>;
+type InitialType = NonNullable<MotionProps['initial']>;
+type AnimateType = NonNullable<MotionProps['animate']>;
+type ExitType = NonNullable<MotionProps['exit']>;
+
 interface WordElement {
   characters: string[];
   needsSpace: boolean;
@@ -12,10 +18,10 @@ interface WordElement {
 
 interface RotatingTextProps {
   texts: string[];
-  transition?: Transition;
-  initial?: boolean | Target | VariantLabels;
-  animate?: Target | VariantLabels;
-  exit?: Target | VariantLabels;
+  transition?: TransitionType;
+  initial?: InitialType;
+  animate?: AnimateType;
+  exit?: ExitType;
   animatePresenceMode?: 'sync' | 'wait';
   animatePresenceInitial?: boolean;
   rotationInterval?: number;
@@ -40,10 +46,10 @@ const props = withDefaults(defineProps<RotatingTextProps>(), {
       type: 'spring',
       damping: 25,
       stiffness: 300
-    }) as Transition,
-  initial: () => ({ y: '100%', opacity: 0 }) as Target,
-  animate: () => ({ y: 0, opacity: 1 }) as Target,
-  exit: () => ({ y: '-120%', opacity: 0 }) as Target,
+    }) as TransitionType,
+  initial: () => ({ y: '100%', opacity: 0 }) as InitialType,
+  animate: () => ({ y: 0, opacity: 1 }) as AnimateType,
+  exit: () => ({ y: '-120%', opacity: 0 }) as ExitType,
   animatePresenceMode: 'wait',
   animatePresenceInitial: false,
   rotationInterval: 2000,

src/content/TextAnimations/Shuffle/Shuffle.vue

@@ -1,10 +1,5 @@
 <template>
-  <component
-    :is="tag"
-    ref="textRef"
-    :class="computedClasses"
-    :style="computedStyle"
-  >
+  <component :is="tag" ref="textRef" :class="computedClasses" :style="computedStyle">
     {{ text }}
   </component>
 </template>
@@ -94,9 +89,7 @@ const baseTw = 'inline-block whitespace-normal break-words will-change-transform
 
 const userHasFont = computed(() => props.className && /font[-[]/i.test(props.className));
 
-const fallbackFont = computed(() =>
-  userHasFont.value ? {} : { fontFamily: `'Press Start 2P', sans-serif` }
-);
+const fallbackFont = computed(() => (userHasFont.value ? {} : { fontFamily: `'Press Start 2P', sans-serif` }));
 
 const computedStyle = computed(() => ({
   textAlign: props.textAlign,
@@ -104,9 +97,7 @@ const computedStyle = computed(() => ({
   ...props.style
 }));
 
-const computedClasses = computed(() =>
-  `${baseTw} ${ready.value ? 'visible' : 'invisible'} ${props.className}`.trim()
-);
+const computedClasses = computed(() => `${baseTw} ${ready.value ? 'visible' : 'invisible'} ${props.className}`.trim());
 
 const removeHover = () => {
   if (hoverHandler && textRef.value) {
@@ -274,7 +265,7 @@ const play = () => {
         cleanupToStill();
         if (props.colorTo) gsap.set(strips, { color: props.colorTo });
         emit('shuffle-complete');
-      props.onShuffleComplete?.();
+        props.onShuffleComplete?.();
         armHover();
       }
     }
@@ -292,7 +283,8 @@ const play = () => {
       },
       at
     );
-    if (props.colorFrom && props.colorTo) tl.to(targets, { color: props.colorTo, duration: props.duration, ease: props.ease }, at);
+    if (props.colorFrom && props.colorTo)
+      tl.to(targets, { color: props.colorTo, duration: props.duration, ease: props.ease }, at);
   };
 
   if (props.animationMode === 'evenodd') {
@@ -315,7 +307,13 @@ const play = () => {
         },
         d
       );
-      if (props.colorFrom && props.colorTo) tl.fromTo(strip, { color: props.colorFrom }, { color: props.colorTo, duration: props.duration, ease: props.ease }, d);
+      if (props.colorFrom && props.colorTo)
+        tl.fromTo(
+          strip,
+          { color: props.colorFrom },
+          { color: props.colorTo, duration: props.duration, ease: props.ease },
+          d
+        );
     });
   }
 
@@ -333,7 +331,11 @@ const create = () => {
 const initializeAnimation = async () => {
   if (typeof window === 'undefined' || !textRef.value || !props.text || !fontsLoaded.value) return;
 
-  if (props.respectReducedMotion && window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+  if (
+    props.respectReducedMotion &&
+    window.matchMedia &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  ) {
     ready.value = true;
     emit('shuffle-complete');
     props.onShuffleComplete?.();

src/content/TextAnimations/TextCursor/TextCursor.vue

@@ -39,7 +39,7 @@ const trail = ref<TrailItem[]>([]);
 const lastMoveTime = ref(Date.now());
 const idCounter = ref(0);
 
-let removalIntervalId: number | null = null;
+let removalIntervalId: ReturnType<typeof setInterval> | null = null;
 
 const handleMouseMove = (e: MouseEvent) => {
   if (!containerRef.value) return;
@@ -134,7 +134,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="containerRef" class="w-full h-full relative">
+  <div ref="containerRef" class="relative w-full h-full">
     <div class="absolute inset-0 pointer-events-none">
       <Motion
         v-for="item in trail"
@@ -152,7 +152,7 @@ onUnmounted(() => {
           repeat: props.randomFloat ? Infinity : 0,
           repeatType: props.randomFloat ? 'mirror' : 'loop'
         }"
-        class="absolute select-none whitespace-nowrap text-3xl"
+        class="absolute text-3xl whitespace-nowrap select-none"
         :style="{ left: `${item.x}px`, top: `${item.y}px` }"
       >
         {{ props.text }}

src/content/TextAnimations/TextTrail/TextTrail.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import {
   CanvasTexture,
   Clock,
@@ -16,6 +15,7 @@ import {
   WebGLRenderer,
   WebGLRenderTarget
 } from 'three';
+import { onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
 
 interface TextTrailProps {
   text?: string;
@@ -151,7 +151,7 @@ let quad: Mesh | null = null;
 let labelMat: ShaderMaterial | null = null;
 let label: Mesh | null = null;
 let resizeObserver: ResizeObserver | null = null;
-let colorTimer: number | null = null;
+let colorTimer: ReturnType<typeof setInterval> | null = null;
 
 const persistColor = ref<[number, number, number]>(
   hexToRgb(props.textColor || props.startColor).map(c => c / 255) as [number, number, number]

src/content/TextAnimations/TrueFocus/TrueFocus.vue

@@ -29,7 +29,7 @@ const containerRef = useTemplateRef<HTMLDivElement>('containerRef');
 const wordRefs = ref<HTMLSpanElement[]>([]);
 const focusRect = ref({ x: 0, y: 0, width: 0, height: 0 });
 
-let interval: number | null = null;
+let interval: ReturnType<typeof setInterval> | null = null;
 
 watch(
   [currentIndex, () => words.value.length],
@@ -150,20 +150,20 @@ onUnmounted(() => {
         '--glow-color': glowColor
       }"
     >
+      <spanx
+        class="top-[-10px] left-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none"
+      ></spanx>
+
       <span
-        class="top-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-r-0 border-b-0 rounded-[3px] w-4 h-4 transition-none"
+        class="top-[-10px] right-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"
       ></span>
 
       <span
-        class="top-[-10px] right-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-b-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"
+        class="bottom-[-10px] left-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none"
       ></span>
 
       <span
-        class="bottom-[-10px] left-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-r-0 rounded-[3px] w-4 h-4 transition-none"
-      ></span>
-
-      <span
-        class="right-[-10px] bottom-[-10px] absolute [filter:drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-[var(--border-color,#fff)] border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"
+        class="right-[-10px] bottom-[-10px] absolute filter-[drop-shadow(0_0_4px_var(--border-color,#fff))] border-[3px] border-(--border-color,#fff) border-t-0 border-l-0 rounded-[3px] w-4 h-4 transition-none"
       ></span>
     </motion.div>
   </div>