[ FIX ] : Build Errors

src/components/code/CliInstallation.vue

@@ -14,8 +14,11 @@
     />
 
     <p class="jsrepo-info">
-      Vue Bits uses <strong>jsrepo</strong> to help you install components via CLI commands. Learn more about it
+      Vue Bits uses
-      <a href="https://jsrepo.dev/" target="_blank" rel="noreferrer">here</a>.
+      <strong>jsrepo</strong>
+      to help you install components via CLI commands. Learn more about it
+      <a href="https://jsrepo.dev/" target="_blank" rel="noreferrer">here</a>
+      .
     </p>
   </div>
 </template>

src/components/common/TabbedLayout.vue

@@ -113,8 +113,8 @@ const subcategory = computed(() => route.params.subcategory);
 const toast = useToast();
 
 const isTooltipVisible = ref(false);
-const showTimeout = ref<number | null>(null);
+const showTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
-const hideTimeout = ref<number | null>(null);
+const hideTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
 
 const toPascal = (str: string) =>
   str

src/components/landing/FeatureCards/FeatureCards.vue

@@ -71,7 +71,7 @@ const ParticleCard = defineComponent({
   setup(props, { slots }) {
     const cardRef = ref<HTMLDivElement | null>(null);
     const particlesRef = ref<HTMLDivElement[]>([]);
-    const timeoutsRef = ref<number[]>([]);
+    const timeoutsRef = ref<ReturnType<typeof setTimeout>[]>([]);
     const isHoveredRef = ref(false);
     const memoizedParticles = ref<HTMLDivElement[]>([]);
     const particlesInit = ref(false);

src/components/navs/Header.vue

@@ -141,8 +141,8 @@ const route = useRoute();
 const router = useRouter();
 
 const isTooltipVisible = ref(false);
-const showTimeout = ref<number | null>(null);
+const showTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
-const hideTimeout = ref<number | null>(null);
+const hideTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
 
 const slug = (str: string) => str.replace(/\s+/g, '-').toLowerCase();
 

src/components/navs/Sidebar.vue

@@ -130,8 +130,8 @@ const isTransitioning = ref(false);
 const sidebarRef = useTemplateRef<HTMLDivElement>('sidebarRef');
 const sidebarContainerRef = useTemplateRef<HTMLDivElement>('sidebarContainerRef');
 
-let hoverTimeoutRef: number | null = null;
+let hoverTimeoutRef: ReturnType<typeof setTimeout> | null = null;
-let hoverDelayTimeoutRef: number | null = null;
+let hoverDelayTimeoutRef: ReturnType<typeof setTimeout> | null = null;
 const savedSet = ref(new Set(getSavedComponents()));
 
 const route = useRoute();

src/content/Animations/Antigravity/Antigravity.vue

@@ -203,9 +203,7 @@ function animate() {
   const elapsedTime = clock.getElapsedTime();
 
   // Mouse movement detection
-  const mouseDist = Math.sqrt(
+  const mouseDist = Math.sqrt(Math.pow(pointer.x - lastMousePos.x, 2) + Math.pow(pointer.y - lastMousePos.y, 2));
-    Math.pow(pointer.x - lastMousePos.x, 2) + Math.pow(pointer.y - lastMousePos.y, 2)
-  );
 
   if (mouseDist > 0.001) {
     lastMouseMoveTime = Date.now();

src/content/Animations/ClickSpark/ClickSpark.vue

@@ -130,7 +130,7 @@ const resizeCanvas = () => {
   }
 };
 
-let resizeTimeout: number;
+let resizeTimeout: ReturnType<typeof setTimeout>;
 
 const handleResize = () => {
   clearTimeout(resizeTimeout);

src/content/Animations/Cubes/Cubes.vue

@@ -5,14 +5,14 @@
         <div
           v-for="(__, c) in cells"
           :key="`${r}-${c}`"
-          class="cube relative w-full h-full aspect-square [transform-style:preserve-3d]"
+          class="relative w-full h-full aspect-square transform-3d cube"
           :data-row="r"
           :data-col="c"
         >
-          <span class="absolute pointer-events-none -inset-9" />
+          <span class="absolute -inset-9 pointer-events-none" />
 
           <div
-            class="cube-face absolute inset-0 flex items-center justify-center"
+            class="absolute inset-0 flex justify-center items-center cube-face"
             :style="{
               background: 'var(--cube-face-bg)',
               border: 'var(--cube-face-border)',
@@ -22,7 +22,7 @@
           />
 
           <div
-            class="cube-face absolute inset-0 flex items-center justify-center"
+            class="absolute inset-0 flex justify-center items-center cube-face"
             :style="{
               background: 'var(--cube-face-bg)',
               border: 'var(--cube-face-border)',
@@ -32,7 +32,7 @@
           />
 
           <div
-            class="cube-face absolute inset-0 flex items-center justify-center"
+            class="absolute inset-0 flex justify-center items-center cube-face"
             :style="{
               background: 'var(--cube-face-bg)',
               border: 'var(--cube-face-border)',
@@ -42,7 +42,7 @@
           />
 
           <div
-            class="cube-face absolute inset-0 flex items-center justify-center"
+            class="absolute inset-0 flex justify-center items-center cube-face"
             :style="{
               background: 'var(--cube-face-bg)',
               border: 'var(--cube-face-border)',
@@ -52,7 +52,7 @@
           />
 
           <div
-            class="cube-face absolute inset-0 flex items-center justify-center"
+            class="absolute inset-0 flex justify-center items-center cube-face"
             :style="{
               background: 'var(--cube-face-bg)',
               border: 'var(--cube-face-border)',
@@ -62,7 +62,7 @@
           />
 
           <div
-            class="cube-face absolute inset-0 flex items-center justify-center"
+            class="absolute inset-0 flex justify-center items-center cube-face"
             :style="{
               background: 'var(--cube-face-bg)',
               border: 'var(--cube-face-border)',
@@ -77,7 +77,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, withDefaults, useTemplateRef } from 'vue';
+import { ref, computed, onMounted, onUnmounted, useTemplateRef } from 'vue';
 import gsap from 'gsap';
 
 interface Gap {
@@ -124,7 +124,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const sceneRef = useTemplateRef<HTMLDivElement>('sceneRef');
 const rafRef = ref<number | null>(null);
-const idleTimerRef = ref<number | null>(null);
+const idleTimerRef = ref<ReturnType<typeof setTimeout> | null>(null);
 const userActiveRef = ref(false);
 const simPosRef = ref<{ x: number; y: number }>({ x: 0, y: 0 });
 const simTargetRef = ref<{ x: number; y: number }>({ x: 0, y: 0 });

src/content/Animations/PixelTrail/PixelTrail.vue

@@ -399,12 +399,7 @@ watch(
       <defs>
         <filter :id="props.gooeyFilter.id">
           <feGaussianBlur in="SourceGraphic" :stdDeviation="props.gooeyFilter.strength" result="blur" />
-          <feColorMatrix
+          <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
-            in="blur"
-            type="matrix"
-            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
-            result="goo"
-          />
           <feComposite in="SourceGraphic" in2="goo" operator="atop" />
         </filter>
       </defs>

src/content/Animations/StickerPeel/StickerPeel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { gsap } from 'gsap';
-import { Draggable } from 'gsap/Draggable';
+import { Draggable } from 'gsap/all';
 import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 
 gsap.registerPlugin(Draggable);

src/content/Backgrounds/Ballpit/Ballpit.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { gsap } from 'gsap';
-import { Observer } from 'gsap/Observer';
+import { Observer } from 'gsap/all';
 import {
   ACESFilmicToneMapping,
   AmbientLight,
@@ -26,7 +26,7 @@ import {
   type WebGLRendererParameters
 } from 'three';
 import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
-import { defineProps, onMounted, onUnmounted, useTemplateRef, ref } from 'vue';
+import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
 
 gsap.registerPlugin(Observer);
 

src/content/Backgrounds/GridScan/GridScan.vue

@@ -1,20 +1,10 @@
 <template>
-  <div
+  <div ref="containerRef" :class="['relative w-full h-full overflow-hidden', className]" :style="style">
-    ref="containerRef"
-    :class="['relative w-full h-full overflow-hidden', className]"
-    :style="style"
-  >
     <div
       v-if="showPreview"
       class="absolute right-3 bottom-3 w-[220px] h-[132px] rounded-lg overflow-hidden border border-white/25 shadow-[0_4px_16px_rgba(0,0,0,0.4)] bg-black text-white text-[12px] leading-[1.2] font-sans pointer-events-none"
     >
-      <video
+      <video ref="videoRef" muted playsinline autoplay class="w-full h-full object-cover -scale-x-100" />
-        ref="videoRef"
-        muted
-        playsinline
-        autoplay
-        class="w-full h-full object-cover -scale-x-100"
-      />
       <div class="absolute left-2 top-2 px-[6px] py-[2px] bg-black/50 rounded-[6px] backdrop-blur-[4px]">
         {{
           enableWebcam
@@ -764,7 +754,7 @@ const setupAnimation = () => {
   // Watch for webcam changes
   const unwatchWebcam = watch(
     () => props.enableWebcam,
-    (newVal) => {
+    newVal => {
       if (newVal && modelsReady.value) {
         stopFaceDetection = false;
         startFaceDetection();
@@ -774,7 +764,7 @@ const setupAnimation = () => {
     }
   );
 
-  const unwatchModels = watch(modelsReady, (ready) => {
+  const unwatchModels = watch(modelsReady, ready => {
     if (ready && props.enableWebcam) {
       stopFaceDetection = false;
       startFaceDetection();
@@ -814,7 +804,8 @@ const setupAnimation = () => {
       uniforms.uNoise.value = Math.max(0, props.noiseIntensity);
       uniforms.uScanGlow.value = props.scanGlow;
       uniforms.uScanOpacity.value = Math.max(0, Math.min(1, props.scanOpacity));
-      uniforms.uScanDirection.value = props.scanDirection === 'backward' ? 1 : props.scanDirection === 'pingpong' ? 2 : 0;
+      uniforms.uScanDirection.value =
+        props.scanDirection === 'backward' ? 1 : props.scanDirection === 'pingpong' ? 2 : 0;
       uniforms.uScanSoftness.value = props.scanSoftness;
       uniforms.uPhaseTaper.value = props.scanPhaseTaper;
       uniforms.uScanDuration.value = Math.max(0.05, props.scanDuration);

src/content/Backgrounds/LetterGlitch/LetterGlitch.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="relative overflow-hidden">
-    <canvas ref="canvasRef" class="absolute top-0 left-0 w-full h-full" />
+    <canvas ref="canvasRef" class="top-0 left-0 absolute w-full h-full" />
 
     <div
       v-if="outerVignette"
-      class="absolute top-0 left-0 w-full h-full pointer-events-none bg-[radial-gradient(circle,_rgba(0,0,0,0)_60%,_rgba(0,0,0,1)_100%)]"
+      class="top-0 left-0 absolute bg-[radial-gradient(circle,rgba(0,0,0,0)_60%,rgba(0,0,0,1)_100%)] w-full h-full pointer-events-none"
     />
 
     <div
       v-if="centerVignette"
-      class="absolute top-0 left-0 w-full h-full pointer-events-none bg-[radial-gradient(circle,_rgba(0,0,0,0.8)_0%,_rgba(0,0,0,0)_60%)]"
+      class="top-0 left-0 absolute bg-[radial-gradient(circle,rgba(0,0,0,0.8)_0%,rgba(0,0,0,0)_60%)] w-full h-full pointer-events-none"
     />
   </div>
 </template>
@@ -268,7 +268,7 @@ const animate = () => {
   animationRef.value = requestAnimationFrame(animate);
 };
 
-let resizeTimeout: number;
+let resizeTimeout: ReturnType<typeof setTimeout>;
 
 const handleResize = () => {
   clearTimeout(resizeTimeout);

src/content/Backgrounds/PixelBlast/PixelBlast.vue

@@ -439,12 +439,13 @@ const setup = () => {
     const canvas = document.createElement('canvas');
     const gl = canvas.getContext('webgl2', { antialias: props.antialias, alpha: true });
     if (!gl) return;
+
     const renderer = new THREE.WebGLRenderer({
       canvas,
-      context: gl as WebGL2RenderingContext,
       antialias: props.antialias,
       alpha: true
     });
+
     renderer.domElement.style.width = '100%';
     renderer.domElement.style.height = '100%';
     renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));

src/content/Components/Dock/Dock.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, defineComponent, h } from 'vue';
-import { useMotionValue, useSpring, useTransform, type SpringOptions } from 'motion-v';
+import { useMotionValue, useSpring, useTransform } from 'motion-v';
+
+export type SpringOptions = NonNullable<Parameters<typeof useSpring>[1]>;
 
 export type DockItemData = {
   icon: unknown;
@@ -65,7 +67,7 @@ const handleMouseLeave = () => {
 </script>
 
 <template>
-  <div :style="{ height: currentHeight + 'px', scrollbarWidth: 'none' }" class="mx-2 flex max-w-full items-center">
+  <div :style="{ height: currentHeight + 'px', scrollbarWidth: 'none' }" class="flex items-center mx-2 max-w-full">
     <div
       @mousemove="handleMouseMove"
       @mouseleave="handleMouseLeave"

src/content/Components/InfiniteMenu/InfiniteMenu.vue

@@ -476,8 +476,10 @@ function makeBuffer(
   gl.bindBuffer(gl.ARRAY_BUFFER, buf);
   if (typeof sizeOrData === 'number') {
     gl.bufferData(gl.ARRAY_BUFFER, sizeOrData, usage);
+  } else if (sizeOrData instanceof ArrayBuffer) {
+    gl.bufferData(gl.ARRAY_BUFFER, sizeOrData, usage);
   } else {
-    gl.bufferData(gl.ARRAY_BUFFER, sizeOrData as AllowSharedBufferSource, usage);
+    gl.bufferData(gl.ARRAY_BUFFER, sizeOrData, usage);
   }
   gl.bindBuffer(gl.ARRAY_BUFFER, null);
   return buf;
@@ -1157,7 +1159,7 @@ watch(
 
 <template>
   <div class="relative w-full h-full">
-    <canvas ref="canvasRef" class="w-full h-full cursor-grab active:cursor-grabbing outline-none overflow-hidden" />
+    <canvas ref="canvasRef" class="outline-none w-full h-full overflow-hidden cursor-grab active:cursor-grabbing" />
 
     <template v-if="activeItem">
       <h2
@@ -1202,7 +1204,7 @@ watch(
           transform: isMoving ? 'translateX(-50%) scale(0)' : 'translateX(-50%) scale(1)'
         }"
       >
-        <p class="select-none relative text-white text-2xl" :style="{ top: '2px' }">&#x2197;</p>
+        <p class="relative text-white text-2xl select-none" :style="{ top: '2px' }">&#x2197;</p>
       </div>
     </template>
   </div>

src/content/Components/InfiniteScroll/InfiniteScroll.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
     <div
-      class="infinite-scroll-wrapper relative flex items-center justify-center w-full overflow-hidden"
+      class="relative flex justify-center items-center w-full overflow-hidden infinite-scroll-wrapper"
       ref="wrapperRef"
       :style="{
         maxHeight: maxHeight,
@@ -9,7 +9,7 @@
       }"
     >
       <div
-        class="infinite-scroll-container flex flex-col px-4 cursor-grab"
+        class="flex flex-col px-4 infinite-scroll-container cursor-grab"
         ref="containerRef"
         :style="{
           transform: getTiltTransform(),
@@ -22,7 +22,7 @@
         <div
           v-for="(item, index) in items"
           :key="index"
-          class="infinite-scroll-item rounded-2xl flex items-center justify-center p-4 text-xl font-semibold text-center border-2 border-white select-none box-border relative"
+          class="box-border relative flex justify-center items-center p-4 border-2 border-white rounded-2xl font-semibold text-xl text-center infinite-scroll-item select-none"
           :style="{
             height: itemMinHeight + 'px',
             marginTop: negativeMargin
@@ -38,9 +38,9 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, watch, useTemplateRef } from 'vue';
 import { gsap } from 'gsap';
-import { Observer } from 'gsap/Observer';
+import { Observer } from 'gsap/all';
+import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
 
 gsap.registerPlugin(Observer);
 

src/content/Components/MagicBento/MagicBento.vue

@@ -116,7 +116,7 @@ const ParticleCard = defineComponent({
   setup(props) {
     const cardRef = ref<HTMLDivElement | null>(null);
     const particlesRef = ref<HTMLDivElement[]>([]);
-    const timeoutsRef = ref<number[]>([]);
+    const timeoutsRef = ref<ReturnType<typeof setTimeout>[]>([]);
     const isHoveredRef = ref(false);
     const memoizedParticles = ref<HTMLDivElement[]>([]);
     const particlesInitialized = ref(false);

src/content/Components/RollingGallery/RollingGallery.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="relative h-[500px] w-full overflow-hidden">
+  <div class="relative w-full h-[500px] overflow-hidden">
-    <div class="absolute top-0 left-0 h-full w-12 z-10 bg-gradient-to-l from-transparent to-[#0b0b0b]" />
+    <div class="top-0 left-0 z-10 absolute bg-gradient-to-l from-transparent to-[#0b0b0b] w-12 h-full" />
-    <div class="absolute top-0 right-0 h-full w-12 z-10 bg-gradient-to-r from-transparent to-[#0b0b0b]" />
+    <div class="top-0 right-0 z-10 absolute bg-gradient-to-r from-transparent to-[#0b0b0b] w-12 h-full" />
 
-    <div class="flex h-full items-center justify-center [perspective:1000px] [transform-style:preserve-3d]">
+    <div class="flex justify-center items-center h-full transform-3d perspective-[1000px]">
       <Motion
         tag="div"
-        class="flex min-h-[200px] items-center justify-center w-full cursor-grab select-none will-change-transform [transform-style:preserve-3d] active:cursor-grabbing"
+        class="flex justify-center items-center w-full min-h-[200px] transform-3d cursor-grab active:cursor-grabbing select-none will-change-transform"
         :style="trackStyle"
         :animate="animateProps"
         :transition="springTransition"
@@ -18,14 +18,14 @@
           v-for="(url, i) in displayImages"
           :key="`gallery-${i}`"
           :style="getItemStyle(i)"
-          class="absolute flex items-center justify-center px-[8%] [backface-visibility:hidden] will-change-transform pointer-events-none"
+          class="absolute flex justify-center items-center px-[8%] backface-hidden pointer-events-none will-change-transform"
         >
           <img
             :src="url"
             alt="gallery"
             loading="lazy"
             decoding="async"
-            class="pointer-events-auto h-[120px] w-[300px] rounded-[15px] border-[3px] border-white object-cover transition-transform duration-300 ease-in-out will-change-transform hover:scale-105"
+            class="border-[3px] border-white rounded-[15px] w-[300px] h-[120px] object-cover hover:scale-105 transition-transform duration-300 ease-in-out pointer-events-auto will-change-transform"
           />
         </div>
       </Motion>
@@ -34,8 +34,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
 import { Motion } from 'motion-v';
+import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
 
 interface RollingGalleryProps {
   autoplay?: boolean;
@@ -64,8 +64,8 @@ const DEFAULT_IMAGES = shallowRef([
 
 const isScreenSizeSm = ref(false);
 const rotateYValue = ref(0);
-const autoplayInterval = ref<number | null>(null);
+const autoplayInterval = ref<ReturnType<typeof setInterval> | null>(null);
-const autoplayTimeout = ref<number | null>(null);
+const autoplayTimeout = ref<ReturnType<typeof setInterval> | null>(null);
 const isDragging = ref(false);
 const isHovered = ref(false);
 const dragStartX = ref(0);
@@ -146,8 +146,8 @@ const getItemStyle = (index: number) => {
   return style;
 };
 
-let resizeTimeout: number | null = null;
+let resizeTimeout: ReturnType<typeof setTimeout> | null = null;
-let hoverTimeout: number | null = null;
+let hoverTimeout: ReturnType<typeof setTimeout> | null = null;
 
 function checkScreenSize() {
   isScreenSizeSm.value = window.innerWidth <= 640;

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;
+  transition?: TransitionType;
-  initial?: boolean | Target | VariantLabels;
+  initial?: InitialType;
-  animate?: Target | VariantLabels;
+  animate?: AnimateType;
-  exit?: Target | VariantLabels;
+  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,
+    }) as TransitionType,
-  initial: () => ({ y: '100%', opacity: 0 }) as Target,
+  initial: () => ({ y: '100%', opacity: 0 }) as InitialType,
-  animate: () => ({ y: 0, opacity: 1 }) as Target,
+  animate: () => ({ y: 0, opacity: 1 }) as AnimateType,
-  exit: () => ({ y: '-120%', opacity: 0 }) as Target,
+  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
+  <component :is="tag" ref="textRef" :class="computedClasses" :style="computedStyle">
-    :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(() =>
+const fallbackFont = computed(() => (userHasFont.value ? {} : { fontFamily: `'Press Start 2P', sans-serif` }));
-  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(() =>
+const computedClasses = computed(() => `${baseTw} ${ready.value ? 'visible' : 'invisible'} ${props.className}`.trim());
-  `${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"
+        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>
-
-      <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"
       ></span>
     </motion.div>
   </div>

src/demo/Animations/AntigravityDemo.vue

@@ -25,11 +25,7 @@
       <Customize>
         <PreviewColor title="Color" v-model="color" />
 
-        <PreviewSelect
+        <PreviewSelect title="Particle Shape" :options="shapeOptions" v-model="particleShape" />
-          title="Particle Shape"
-          :options="shapeOptions"
-          v-model="particleShape"
-        />
 
         <PreviewSlider title="Magnet Radius" :min="5" :max="50" :step="1" v-model="magnetRadius" />
 

src/demo/Animations/PixelTrailDemo.vue

@@ -19,13 +19,41 @@
       </div>
 
       <Customize>
-        <PreviewSlider title="Grid Size" v-model="gridSize" :min="10" :max="100" :step="1" @update:model-value="forceRerender" />
+        <PreviewSlider
+          title="Grid Size"
+          v-model="gridSize"
+          :min="10"
+          :max="100"
+          :step="1"
+          @update:model-value="forceRerender"
+        />
 
-        <PreviewSlider title="Trail Size" v-model="trailSize" :min="0.05" :max="0.5" :step="0.01" @update:model-value="forceRerender" />
+        <PreviewSlider
+          title="Trail Size"
+          v-model="trailSize"
+          :min="0.05"
+          :max="0.5"
+          :step="0.01"
+          @update:model-value="forceRerender"
+        />
 
-        <PreviewSlider title="Max Age" v-model="maxAge" :min="100" :max="1000" :step="50" @update:model-value="forceRerender" />
+        <PreviewSlider
+          title="Max Age"
+          v-model="maxAge"
+          :min="100"
+          :max="1000"
+          :step="50"
+          @update:model-value="forceRerender"
+        />
 
-        <PreviewSlider title="Interpolate" v-model="interpolate" :min="0" :max="10" :step="0.1" @update:model-value="forceRerender" />
+        <PreviewSlider
+          title="Interpolate"
+          v-model="interpolate"
+          :min="0"
+          :max="10"
+          :step="0.1"
+          @update:model-value="forceRerender"
+        />
 
         <PreviewColor title="Color" v-model="color" @update:model-value="forceRerender" />
 
@@ -88,6 +116,11 @@ const propData = [
   { name: 'maxAge', type: 'number', default: '250', description: 'Duration of the trail effect.' },
   { name: 'interpolate', type: 'number', default: '5', description: 'Interpolation factor for pointer movement.' },
   { name: 'color', type: 'string', default: '#ffffff', description: 'Pixel color.' },
-  { name: 'gooeyFilter', type: 'object', default: "{ id: 'custom-goo-filter', strength: 5 }", description: 'Configuration for gooey filter.' }
+  {
+    name: 'gooeyFilter',
+    type: 'object',
+    default: "{ id: 'custom-goo-filter', strength: 5 }",
+    description: 'Configuration for gooey filter.'
+  }
 ];
 </script>

src/demo/Backgrounds/GridScanDemo.vue

@@ -24,63 +24,21 @@
         <PreviewColor title="Lines Color" v-model="linesColor" class="mb-4" />
         <PreviewColor title="Scan Color" v-model="scanColor" />
 
-        <PreviewSlider
+        <PreviewSlider title="Line Thickness" v-model="lineThickness" :min="1" :max="4" :step="0.1" />
-          title="Line Thickness"
-          v-model="lineThickness"
-          :min="1"
-          :max="4"
-          :step="0.1"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Grid Scale" v-model="gridScale" :min="0.02" :max="0.5" :step="0.01" />
-          title="Grid Scale"
-          v-model="gridScale"
-          :min="0.02"
-          :max="0.5"
-          :step="0.01"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Line Jitter" v-model="lineJitter" :min="0" :max="1" :step="0.01" />
-          title="Line Jitter"
-          v-model="lineJitter"
-          :min="0"
-          :max="1"
-          :step="0.01"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Scan Glow" v-model="scanGlow" :min="0.1" :max="3" :step="0.1" />
-          title="Scan Glow"
-          v-model="scanGlow"
-          :min="0.1"
-          :max="3"
-          :step="0.1"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Scan Softness" v-model="scanSoftness" :min="0.1" :max="4" :step="0.1" />
-          title="Scan Softness"
-          v-model="scanSoftness"
-          :min="0.1"
-          :max="4"
-          :step="0.1"
-        />
 
         <PreviewSwitch title="Enable Post" v-model="enablePost" />
 
-        <PreviewSlider
+        <PreviewSlider title="Chromatic Aberration" v-model="chromaticAberration" :min="0" :max="0.01" :step="0.0005" />
-          title="Chromatic Aberration"
-          v-model="chromaticAberration"
-          :min="0"
-          :max="0.01"
-          :step="0.0005"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Noise Intensity" v-model="noiseIntensity" :min="0" :max="0.1" :step="0.005" />
-          title="Noise Intensity"
-          v-model="noiseIntensity"
-          :min="0"
-          :max="0.1"
-          :step="0.005"
-        />
 
         <PreviewSwitch title="Enable Webcam" v-model="enableWebcam" />
         <PreviewSwitch title="Show Preview HUD" v-model="showPreview" />

src/demo/TextAnimations/ShuffleDemo.vue

@@ -20,53 +20,19 @@
       </div>
 
       <Customize>
-        <PreviewSelect
+        <PreviewSelect title="Direction" v-model="shuffleDirection" :options="directionOptions" />
-          title="Direction"
-          v-model="shuffleDirection"
-          :options="directionOptions"
-        />
 
-        <PreviewSelect
+        <PreviewSelect title="Ease" v-model="ease" :options="easeOptions" />
-          title="Ease"
-          v-model="ease"
-          :options="easeOptions"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Duration" v-model="duration" :min="0.1" :max="1.5" :step="0.05" value-unit="s" />
-          title="Duration"
-          v-model="duration"
-          :min="0.1"
-          :max="1.5"
-          :step="0.05"
-          value-unit="s"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Shuffle Times" v-model="shuffleTimes" :min="1" :max="8" :step="1" />
-          title="Shuffle Times"
-          v-model="shuffleTimes"
-          :min="1"
-          :max="8"
-          :step="1"
-        />
 
-        <PreviewSlider
+        <PreviewSlider title="Stagger" v-model="stagger" :min="0" :max="0.2" :step="0.01" value-unit="s" />
-          title="Stagger"
-          v-model="stagger"
-          :min="0"
-          :max="0.2"
-          :step="0.01"
-          value-unit="s"
-        />
 
-        <PreviewSwitch
+        <PreviewSwitch title="Hover Replay" v-model="triggerOnHover" />
-          title="Hover Replay"
-          v-model="triggerOnHover"
-        />
 
-        <PreviewSwitch
+        <PreviewSwitch title="Loop" v-model="loop" />
-          title="Loop"
-          v-model="loop"
-        />
 
         <PreviewSlider
           title="Loop Delay"