diff --git a/src/ts-default/Animations/Crosshair/Crosshair.tsx b/src/ts-default/Animations/Crosshair/Crosshair.tsx
index c3fad6f52..3fba42ff9 100644
--- a/src/ts-default/Animations/Crosshair/Crosshair.tsx
+++ b/src/ts-default/Animations/Crosshair/Crosshair.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, RefObject } from 'react';
+import React, { useEffect, useRef, type RefObject } from 'react';
 import { gsap } from 'gsap';
 
 const lerp = (a: number, b: number, n: number): number => (1 - n) * a + n * b;
diff --git a/src/ts-default/Animations/ElectricBorder/ElectricBorder.tsx b/src/ts-default/Animations/ElectricBorder/ElectricBorder.tsx
index ab72ca53f..56671af00 100644
--- a/src/ts-default/Animations/ElectricBorder/ElectricBorder.tsx
+++ b/src/ts-default/Animations/ElectricBorder/ElectricBorder.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useCallback, CSSProperties, ReactNode } from 'react';
+import React, { useEffect, useRef, useCallback, type CSSProperties, type ReactNode } from 'react';
 import './ElectricBorder.css';
 
 interface ElectricBorderProps {
diff --git a/src/ts-default/Animations/GradualBlur/GradualBlur.tsx b/src/ts-default/Animations/GradualBlur/GradualBlur.tsx
index 8f4f5be32..49e26e06f 100644
--- a/src/ts-default/Animations/GradualBlur/GradualBlur.tsx
+++ b/src/ts-default/Animations/GradualBlur/GradualBlur.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, useEffect, useRef, useState, useMemo, PropsWithChildren } from 'react';
+import React, { type CSSProperties, useEffect, useRef, useState, useMemo, type PropsWithChildren } from 'react';
 
 import './GradualBlur.css';
 
diff --git a/src/ts-default/Animations/ImageTrail/ImageTrail.tsx b/src/ts-default/Animations/ImageTrail/ImageTrail.tsx
index c789cf7ed..0073019c3 100644
--- a/src/ts-default/Animations/ImageTrail/ImageTrail.tsx
+++ b/src/ts-default/Animations/ImageTrail/ImageTrail.tsx
@@ -1,5 +1,5 @@
 import { gsap } from 'gsap';
-import { JSX, useEffect, useRef } from 'react';
+import { type JSX, useEffect, useRef } from 'react';
 import './ImageTrail.css';
 
 function lerp(a: number, b: number, n: number): number {
diff --git a/src/ts-default/Animations/Magnet/Magnet.tsx b/src/ts-default/Animations/Magnet/Magnet.tsx
index 295c81208..4cd7f1474 100644
--- a/src/ts-default/Animations/Magnet/Magnet.tsx
+++ b/src/ts-default/Animations/Magnet/Magnet.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, ReactNode, HTMLAttributes } from 'react';
+import React, { useState, useEffect, useRef, type ReactNode, type HTMLAttributes } from 'react';
 
 interface MagnetProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
diff --git a/src/ts-default/Animations/MagnetLines/MagnetLines.tsx b/src/ts-default/Animations/MagnetLines/MagnetLines.tsx
index ac2f5237a..8014e0fe6 100644
--- a/src/ts-default/Animations/MagnetLines/MagnetLines.tsx
+++ b/src/ts-default/Animations/MagnetLines/MagnetLines.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, CSSProperties } from 'react';
+import React, { useRef, useEffect, type CSSProperties } from 'react';
 import './MagnetLines.css';
 
 interface MagnetLinesProps {
diff --git a/src/ts-default/Animations/OrbitImages/OrbitImages.tsx b/src/ts-default/Animations/OrbitImages/OrbitImages.tsx
index 698fd33a4..34b969368 100644
--- a/src/ts-default/Animations/OrbitImages/OrbitImages.tsx
+++ b/src/ts-default/Animations/OrbitImages/OrbitImages.tsx
@@ -1,7 +1,7 @@
 // Component created by Dominik Koch
 // https://x.com/dominikkoch
 
-import { useMemo, useEffect, useLayoutEffect, useRef, useState, ReactNode } from 'react';
+import { useMemo, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
 import { motion, useMotionValue, useTransform, animate, MotionValue } from 'motion/react';
 import './OrbitImages.css';
 
diff --git a/src/ts-default/Animations/PixelTrail/PixelTrail.tsx b/src/ts-default/Animations/PixelTrail/PixelTrail.tsx
index 8097cb2b8..d6bfa0efe 100644
--- a/src/ts-default/Animations/PixelTrail/PixelTrail.tsx
+++ b/src/ts-default/Animations/PixelTrail/PixelTrail.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unknown-property */
 import React, { useMemo } from 'react';
-import { Canvas, useThree, CanvasProps, ThreeEvent } from '@react-three/fiber';
+import { Canvas, useThree, type CanvasProps, type ThreeEvent } from '@react-three/fiber';
 import { shaderMaterial, useTrailTexture } from '@react-three/drei';
 import * as THREE from 'three';
 
diff --git a/src/ts-default/Animations/PixelTransition/PixelTransition.tsx b/src/ts-default/Animations/PixelTransition/PixelTransition.tsx
index 49c8430e1..e502b71e1 100644
--- a/src/ts-default/Animations/PixelTransition/PixelTransition.tsx
+++ b/src/ts-default/Animations/PixelTransition/PixelTransition.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, CSSProperties } from 'react';
+import React, { useRef, useEffect, useState, type CSSProperties } from 'react';
 import { gsap } from 'gsap';
 import './PixelTransition.css';
 
diff --git a/src/ts-default/Animations/StickerPeel/StickerPeel.tsx b/src/ts-default/Animations/StickerPeel/StickerPeel.tsx
index 3ed1dd166..ad1a53e8e 100644
--- a/src/ts-default/Animations/StickerPeel/StickerPeel.tsx
+++ b/src/ts-default/Animations/StickerPeel/StickerPeel.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect, useMemo, CSSProperties } from 'react';
+import { useRef, useEffect, useMemo, type CSSProperties } from 'react';
 import { gsap } from 'gsap';
 import { Draggable } from 'gsap/Draggable';
 import './StickerPeel.css';
diff --git a/src/ts-default/Animations/Strands/Strands.tsx b/src/ts-default/Animations/Strands/Strands.tsx
index 825ba7e08..a010cab4d 100644
--- a/src/ts-default/Animations/Strands/Strands.tsx
+++ b/src/ts-default/Animations/Strands/Strands.tsx
@@ -1,5 +1,5 @@
 import { Renderer, Program, Mesh, Color, Triangle, RenderTarget } from 'ogl';
-import { useEffect, useRef, CSSProperties } from 'react';
+import { useEffect, useRef, type CSSProperties } from 'react';
 
 import './Strands.css';
 
diff --git a/src/ts-default/Backgrounds/Ballpit/Ballpit.tsx b/src/ts-default/Backgrounds/Ballpit/Ballpit.tsx
index 3f9700f6a..e2b20d611 100644
--- a/src/ts-default/Backgrounds/Ballpit/Ballpit.tsx
+++ b/src/ts-default/Backgrounds/Ballpit/Ballpit.tsx
@@ -22,7 +22,7 @@ import {
   Vector2,
   Vector3,
   WebGLRenderer,
-  WebGLRendererParameters
+  type WebGLRendererParameters
 } from 'three';
 import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
 
diff --git a/src/ts-default/Backgrounds/Beams/Beams.tsx b/src/ts-default/Backgrounds/Beams/Beams.tsx
index 63c0fa13f..a0762b9a8 100644
--- a/src/ts-default/Backgrounds/Beams/Beams.tsx
+++ b/src/ts-default/Backgrounds/Beams/Beams.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useImperativeHandle, useEffect, useRef, useMemo, FC, ReactNode } from 'react';
+import { forwardRef, useImperativeHandle, useEffect, useRef, useMemo, type FC, type ReactNode } from 'react';
 
 import * as THREE from 'three';
 
diff --git a/src/ts-default/Backgrounds/Dither/Dither.tsx b/src/ts-default/Backgrounds/Dither/Dither.tsx
index 210789700..334d0792f 100644
--- a/src/ts-default/Backgrounds/Dither/Dither.tsx
+++ b/src/ts-default/Backgrounds/Dither/Dither.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unknown-property */
 import { useRef, useEffect, forwardRef } from 'react';
-import { Canvas, useFrame, useThree, ThreeEvent } from '@react-three/fiber';
+import { Canvas, useFrame, useThree, type ThreeEvent } from '@react-three/fiber';
 import { EffectComposer, wrapEffect } from '@react-three/postprocessing';
 import { Effect } from 'postprocessing';
 import * as THREE from 'three';
diff --git a/src/ts-default/Backgrounds/GridMotion/GridMotion.tsx b/src/ts-default/Backgrounds/GridMotion/GridMotion.tsx
index 81800ecdf..79a187124 100644
--- a/src/ts-default/Backgrounds/GridMotion/GridMotion.tsx
+++ b/src/ts-default/Backgrounds/GridMotion/GridMotion.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, FC, ReactNode } from 'react';
+import { useEffect, useRef, type FC, type ReactNode } from 'react';
 import { gsap } from 'gsap';
 import './GridMotion.css';
 
diff --git a/src/ts-default/Backgrounds/Hyperspeed/Hyperspeed.tsx b/src/ts-default/Backgrounds/Hyperspeed/Hyperspeed.tsx
index b4fd887d6..7f3de13b5 100644
--- a/src/ts-default/Backgrounds/Hyperspeed/Hyperspeed.tsx
+++ b/src/ts-default/Backgrounds/Hyperspeed/Hyperspeed.tsx
@@ -1,5 +1,5 @@
 import { BloomEffect, EffectComposer, EffectPass, RenderPass, SMAAEffect, SMAAPreset } from 'postprocessing';
-import { FC, useEffect, useRef } from 'react';
+import { type FC, useEffect, useRef } from 'react';
 import * as THREE from 'three';
 
 import './Hyperspeed.css';
diff --git a/src/ts-default/Backgrounds/Silk/Silk.tsx b/src/ts-default/Backgrounds/Silk/Silk.tsx
index 2305fea6f..724749f71 100644
--- a/src/ts-default/Backgrounds/Silk/Silk.tsx
+++ b/src/ts-default/Backgrounds/Silk/Silk.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable react/no-unknown-property */
 import React, { forwardRef, useMemo, useRef, useLayoutEffect, useEffect } from 'react';
-import { Canvas, useFrame, useThree, RootState } from '@react-three/fiber';
+import { Canvas, useFrame, useThree, type RootState } from '@react-three/fiber';
 import { Color, Mesh, ShaderMaterial } from 'three';
-import { IUniform } from 'three';
+import { type IUniform } from 'three';
 
 type NormalizedRGB = [number, number, number];
 
diff --git a/src/ts-default/Backgrounds/Waves/Waves.tsx b/src/ts-default/Backgrounds/Waves/Waves.tsx
index a240c3d1e..c87e0b1eb 100644
--- a/src/ts-default/Backgrounds/Waves/Waves.tsx
+++ b/src/ts-default/Backgrounds/Waves/Waves.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, CSSProperties } from 'react';
+import React, { useRef, useEffect, type CSSProperties } from 'react';
 import './Waves.css';
 
 class Grad {
diff --git a/src/ts-default/Components/AnimatedList/AnimatedList.tsx b/src/ts-default/Components/AnimatedList/AnimatedList.tsx
index cd7e0aeb0..5e4a19efe 100644
--- a/src/ts-default/Components/AnimatedList/AnimatedList.tsx
+++ b/src/ts-default/Components/AnimatedList/AnimatedList.tsx
@@ -1,4 +1,12 @@
-import React, { useRef, useState, useEffect, useCallback, ReactNode, MouseEventHandler, UIEvent } from 'react';
+import React, {
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+  type MouseEventHandler,
+  type UIEvent
+} from 'react';
 import { motion, useInView } from 'motion/react';
 import './AnimatedList.css';
 
diff --git a/src/ts-default/Components/CardSwap/CardSwap.tsx b/src/ts-default/Components/CardSwap/CardSwap.tsx
index b711a0909..cfeeac4c8 100644
--- a/src/ts-default/Components/CardSwap/CardSwap.tsx
+++ b/src/ts-default/Components/CardSwap/CardSwap.tsx
@@ -3,9 +3,9 @@ import React, {
   cloneElement,
   forwardRef,
   isValidElement,
-  ReactElement,
-  ReactNode,
-  RefObject,
+  type ReactElement,
+  type ReactNode,
+  type RefObject,
   useEffect,
   useMemo,
   useRef
diff --git a/src/ts-default/Components/Carousel/Carousel.tsx b/src/ts-default/Components/Carousel/Carousel.tsx
index a075e4c7d..b884496fa 100644
--- a/src/ts-default/Components/Carousel/Carousel.tsx
+++ b/src/ts-default/Components/Carousel/Carousel.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { motion, PanInfo, useMotionValue, useTransform } from 'motion/react';
+import { motion, type PanInfo, useMotionValue, useTransform } from 'motion/react';
 // replace icons with your own if needed
 import { FiCircle, FiCode, FiFileText, FiLayers, FiLayout } from 'react-icons/fi';
 import './Carousel.css';
diff --git a/src/ts-default/Components/DecayCard/DecayCard.tsx b/src/ts-default/Components/DecayCard/DecayCard.tsx
index 3e4517cc6..5f351170d 100644
--- a/src/ts-default/Components/DecayCard/DecayCard.tsx
+++ b/src/ts-default/Components/DecayCard/DecayCard.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, ReactNode } from 'react';
+import React, { useEffect, useRef, type ReactNode } from 'react';
 import { gsap } from 'gsap';
 import './DecayCard.css';
 
diff --git a/src/ts-default/Components/FluidGlass/FluidGlass.tsx b/src/ts-default/Components/FluidGlass/FluidGlass.tsx
index c1d256bdd..a17a7d9a7 100644
--- a/src/ts-default/Components/FluidGlass/FluidGlass.tsx
+++ b/src/ts-default/Components/FluidGlass/FluidGlass.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unknown-property */
 import * as THREE from 'three';
-import { useRef, useState, useEffect, memo, ReactNode } from 'react';
-import { Canvas, createPortal, useFrame, useThree, ThreeElements } from '@react-three/fiber';
+import { useRef, useState, useEffect, memo, type ReactNode } from 'react';
+import { Canvas, createPortal, useFrame, useThree, type ThreeElements } from '@react-three/fiber';
 import {
   useFBO,
   useGLTF,
diff --git a/src/ts-default/Components/InfiniteMenu/InfiniteMenu.tsx b/src/ts-default/Components/InfiniteMenu/InfiniteMenu.tsx
index a7fa2131b..37a91c1f8 100644
--- a/src/ts-default/Components/InfiniteMenu/InfiniteMenu.tsx
+++ b/src/ts-default/Components/InfiniteMenu/InfiniteMenu.tsx
@@ -1,4 +1,4 @@
-import { FC, useRef, useState, useEffect, MutableRefObject } from 'react';
+import { type FC, useRef, useState, useEffect, type MutableRefObject } from 'react';
 import { mat4, quat, vec2, vec3 } from 'gl-matrix';
 import './InfiniteMenu.css';
 
diff --git a/src/ts-default/Components/LineSidebar/LineSidebar.tsx b/src/ts-default/Components/LineSidebar/LineSidebar.tsx
index 9467f025c..54f8afd77 100644
--- a/src/ts-default/Components/LineSidebar/LineSidebar.tsx
+++ b/src/ts-default/Components/LineSidebar/LineSidebar.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback, useEffect, CSSProperties } from 'react';
+import { useRef, useState, useCallback, useEffect, type CSSProperties } from 'react';
 import './LineSidebar.css';
 
 type Falloff = 'linear' | 'smooth' | 'sharp';
diff --git a/src/ts-default/Components/ModelViewer/ModelViewer.tsx b/src/ts-default/Components/ModelViewer/ModelViewer.tsx
index e469fa643..565f79b70 100644
--- a/src/ts-default/Components/ModelViewer/ModelViewer.tsx
+++ b/src/ts-default/Components/ModelViewer/ModelViewer.tsx
@@ -1,4 +1,4 @@
-import { FC, Suspense, useRef, useLayoutEffect, useEffect, useMemo } from 'react';
+import { type FC, Suspense, useRef, useLayoutEffect, useEffect, useMemo } from 'react';
 import { Canvas, useFrame, useLoader, useThree, invalidate } from '@react-three/fiber';
 import { OrbitControls, useGLTF, useFBX, useProgress, Html, Environment, ContactShadows } from '@react-three/drei';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
diff --git a/src/ts-default/Components/OptionWheel/OptionWheel.tsx b/src/ts-default/Components/OptionWheel/OptionWheel.tsx
index d40740474..e58caaee8 100644
--- a/src/ts-default/Components/OptionWheel/OptionWheel.tsx
+++ b/src/ts-default/Components/OptionWheel/OptionWheel.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback, useEffect, CSSProperties } from 'react';
+import { useRef, useState, useCallback, useEffect, type CSSProperties } from 'react';
 import './OptionWheel.css';
 
 type Side = 'left' | 'right';
diff --git a/src/ts-default/Components/PixelCard/PixelCard.tsx b/src/ts-default/Components/PixelCard/PixelCard.tsx
index ae4aa6a0d..b35ad6505 100644
--- a/src/ts-default/Components/PixelCard/PixelCard.tsx
+++ b/src/ts-default/Components/PixelCard/PixelCard.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { JSX } from 'react';
+import { type JSX } from 'react';
 import './PixelCard.css';
 
 class Pixel {
diff --git a/src/ts-default/Components/SpecularButton/SpecularButton.tsx b/src/ts-default/Components/SpecularButton/SpecularButton.tsx
index e8175ff7a..52bb336f4 100644
--- a/src/ts-default/Components/SpecularButton/SpecularButton.tsx
+++ b/src/ts-default/Components/SpecularButton/SpecularButton.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect, CSSProperties, ReactNode, MouseEventHandler } from 'react';
+import { useRef, useEffect, type CSSProperties, type ReactNode, type MouseEventHandler } from 'react';
 import { Renderer, Program, Mesh, Triangle, Color } from 'ogl';
 import './SpecularButton.css';
 
diff --git a/src/ts-default/Components/Stepper/Stepper.tsx b/src/ts-default/Components/Stepper/Stepper.tsx
index 2c1269fe4..17c437cd0 100644
--- a/src/ts-default/Components/Stepper/Stepper.tsx
+++ b/src/ts-default/Components/Stepper/Stepper.tsx
@@ -1,5 +1,5 @@
-import { AnimatePresence, motion, Variants } from 'motion/react';
-import React, { Children, HTMLAttributes, JSX, ReactNode, useLayoutEffect, useRef, useState } from 'react';
+import { AnimatePresence, motion, type Variants } from 'motion/react';
+import React, { Children, type HTMLAttributes, type JSX, type ReactNode, useLayoutEffect, useRef, useState } from 'react';
 
 import './Stepper.css';
 
diff --git a/src/ts-default/TextAnimations/BlurText/BlurText.tsx b/src/ts-default/TextAnimations/BlurText/BlurText.tsx
index 5726907fb..a7765cd98 100644
--- a/src/ts-default/TextAnimations/BlurText/BlurText.tsx
+++ b/src/ts-default/TextAnimations/BlurText/BlurText.tsx
@@ -1,4 +1,4 @@
-import { motion, Transition } from 'motion/react';
+import { motion, type Transition } from 'motion/react';
 import { useEffect, useRef, useState, useMemo } from 'react';
 
 type BlurTextProps = {
diff --git a/src/ts-default/TextAnimations/CircularText/CircularText.tsx b/src/ts-default/TextAnimations/CircularText/CircularText.tsx
index 535bd4e1a..2cfddd471 100644
--- a/src/ts-default/TextAnimations/CircularText/CircularText.tsx
+++ b/src/ts-default/TextAnimations/CircularText/CircularText.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { motion, useAnimation, useMotionValue, MotionValue, Transition } from 'motion/react';
+import { motion, useAnimation, useMotionValue, MotionValue, type Transition } from 'motion/react';
 
 import './CircularText.css';
 interface CircularTextProps {
diff --git a/src/ts-default/TextAnimations/CurvedLoop/CurvedLoop.tsx b/src/ts-default/TextAnimations/CurvedLoop/CurvedLoop.tsx
index a3a65f252..524dcfdc0 100644
--- a/src/ts-default/TextAnimations/CurvedLoop/CurvedLoop.tsx
+++ b/src/ts-default/TextAnimations/CurvedLoop/CurvedLoop.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState, useMemo, useId, FC, PointerEvent } from 'react';
+import { useRef, useEffect, useState, useMemo, useId, type FC, type PointerEvent } from 'react';
 import './CurvedLoop.css';
 
 interface CurvedLoopProps {
diff --git a/src/ts-default/TextAnimations/GlitchText/GlitchText.tsx b/src/ts-default/TextAnimations/GlitchText/GlitchText.tsx
index 7a5a20651..2a259c383 100644
--- a/src/ts-default/TextAnimations/GlitchText/GlitchText.tsx
+++ b/src/ts-default/TextAnimations/GlitchText/GlitchText.tsx
@@ -1,4 +1,4 @@
-import { FC, CSSProperties } from 'react';
+import { type FC, type CSSProperties } from 'react';
 import './GlitchText.css';
 
 interface GlitchTextProps {
diff --git a/src/ts-default/TextAnimations/GradientText/GradientText.tsx b/src/ts-default/TextAnimations/GradientText/GradientText.tsx
index e8e870dd7..50d6948ab 100644
--- a/src/ts-default/TextAnimations/GradientText/GradientText.tsx
+++ b/src/ts-default/TextAnimations/GradientText/GradientText.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef, ReactNode } from 'react';
+import { useState, useCallback, useEffect, useRef, type ReactNode } from 'react';
 import { motion, useMotionValue, useAnimationFrame, useTransform } from 'motion/react';
 import './GradientText.css';
 
diff --git a/src/ts-default/TextAnimations/RotatingText/RotatingText.tsx b/src/ts-default/TextAnimations/RotatingText/RotatingText.tsx
index 93fe480ec..3fdf112f5 100644
--- a/src/ts-default/TextAnimations/RotatingText/RotatingText.tsx
+++ b/src/ts-default/TextAnimations/RotatingText/RotatingText.tsx
@@ -4,7 +4,7 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo
 import {
   motion,
   AnimatePresence,
-  Transition,
+  type Transition,
   type VariantLabels,
   type Target,
   type TargetAndTransition
diff --git a/src/ts-default/TextAnimations/ScrollFloat/ScrollFloat.tsx b/src/ts-default/TextAnimations/ScrollFloat/ScrollFloat.tsx
index f3627b50b..1f6a95f8b 100644
--- a/src/ts-default/TextAnimations/ScrollFloat/ScrollFloat.tsx
+++ b/src/ts-default/TextAnimations/ScrollFloat/ScrollFloat.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, ReactNode, RefObject } from 'react';
+import React, { useEffect, useMemo, useRef, type ReactNode, type RefObject } from 'react';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
diff --git a/src/ts-default/TextAnimations/ScrollReveal/ScrollReveal.tsx b/src/ts-default/TextAnimations/ScrollReveal/ScrollReveal.tsx
index 9386495fe..a19ae6d0d 100644
--- a/src/ts-default/TextAnimations/ScrollReveal/ScrollReveal.tsx
+++ b/src/ts-default/TextAnimations/ScrollReveal/ScrollReveal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useMemo, ReactNode, RefObject } from 'react';
+import React, { useEffect, useRef, useMemo, type ReactNode, type RefObject } from 'react';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import './ScrollReveal.css';
diff --git a/src/ts-default/TextAnimations/TextType/TextType.tsx b/src/ts-default/TextAnimations/TextType/TextType.tsx
index e334fced1..c700f91da 100644
--- a/src/ts-default/TextAnimations/TextType/TextType.tsx
+++ b/src/ts-default/TextAnimations/TextType/TextType.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ElementType, useEffect, useRef, useState, createElement, useMemo, useCallback } from 'react';
+import { type ElementType, useEffect, useRef, useState, createElement, useMemo, useCallback } from 'react';
 import { gsap } from 'gsap';
 import './TextType.css';
 
diff --git a/src/ts-default/TextAnimations/TrueFocus/TrueFocus.tsx b/src/ts-default/TextAnimations/TrueFocus/TrueFocus.tsx
index ab0112e35..84fe7528a 100644
--- a/src/ts-default/TextAnimations/TrueFocus/TrueFocus.tsx
+++ b/src/ts-default/TextAnimations/TrueFocus/TrueFocus.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, RefObject } from 'react';
+import { useEffect, useRef, useState, type RefObject } from 'react';
 import { motion } from 'motion/react';
 import './TrueFocus.css';
 
diff --git a/src/ts-default/TextAnimations/VariableProximity/VariableProximity.tsx b/src/ts-default/TextAnimations/VariableProximity/VariableProximity.tsx
index ee13ade15..76921d294 100644
--- a/src/ts-default/TextAnimations/VariableProximity/VariableProximity.tsx
+++ b/src/ts-default/TextAnimations/VariableProximity/VariableProximity.tsx
@@ -1,4 +1,12 @@
-import { forwardRef, useMemo, useRef, useEffect, MutableRefObject, RefObject, HTMLAttributes } from 'react';
+import {
+  forwardRef,
+  useMemo,
+  useRef,
+  useEffect,
+  type MutableRefObject,
+  type RefObject,
+  type HTMLAttributes
+} from 'react';
 import { motion } from 'motion/react';
 import './VariableProximity.css';
 
diff --git a/src/ts-tailwind/Animations/Crosshair/Crosshair.tsx b/src/ts-tailwind/Animations/Crosshair/Crosshair.tsx
index 8f02ea182..ce252e10e 100644
--- a/src/ts-tailwind/Animations/Crosshair/Crosshair.tsx
+++ b/src/ts-tailwind/Animations/Crosshair/Crosshair.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, RefObject } from 'react';
+import React, { useEffect, useRef, type RefObject } from 'react';
 import { gsap } from 'gsap';
 
 const lerp = (a: number, b: number, n: number): number => (1 - n) * a + n * b;
diff --git a/src/ts-tailwind/Animations/ElectricBorder/ElectricBorder.tsx b/src/ts-tailwind/Animations/ElectricBorder/ElectricBorder.tsx
index a884d3920..90d840310 100644
--- a/src/ts-tailwind/Animations/ElectricBorder/ElectricBorder.tsx
+++ b/src/ts-tailwind/Animations/ElectricBorder/ElectricBorder.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useCallback, CSSProperties, ReactNode } from 'react';
+import React, { useEffect, useRef, useCallback, type CSSProperties, type ReactNode } from 'react';
 
 function hexToRgba(hex: string, alpha: number = 1): string {
   if (!hex) return `rgba(0,0,0,${alpha})`;
diff --git a/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx b/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx
index d43eb13a4..717b6f1dd 100644
--- a/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx
+++ b/src/ts-tailwind/Animations/GradualBlur/GradualBlur.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, useEffect, useRef, useState, useMemo, PropsWithChildren } from 'react';
+import React, { type CSSProperties, useEffect, useRef, useState, useMemo, type PropsWithChildren } from 'react';
 
 type GradualBlurProps = PropsWithChildren<{
   position?: 'top' | 'bottom' | 'left' | 'right';
diff --git a/src/ts-tailwind/Animations/ImageTrail/ImageTrail.tsx b/src/ts-tailwind/Animations/ImageTrail/ImageTrail.tsx
index aada4cfe4..6b3554d4c 100644
--- a/src/ts-tailwind/Animations/ImageTrail/ImageTrail.tsx
+++ b/src/ts-tailwind/Animations/ImageTrail/ImageTrail.tsx
@@ -1,5 +1,5 @@
 import { gsap } from 'gsap';
-import { JSX, useEffect, useRef } from 'react';
+import { type JSX, useEffect, useRef } from 'react';
 
 function lerp(a: number, b: number, n: number): number {
   return (1 - n) * a + n * b;
diff --git a/src/ts-tailwind/Animations/Magnet/Magnet.tsx b/src/ts-tailwind/Animations/Magnet/Magnet.tsx
index 295c81208..4cd7f1474 100644
--- a/src/ts-tailwind/Animations/Magnet/Magnet.tsx
+++ b/src/ts-tailwind/Animations/Magnet/Magnet.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, ReactNode, HTMLAttributes } from 'react';
+import React, { useState, useEffect, useRef, type ReactNode, type HTMLAttributes } from 'react';
 
 interface MagnetProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
diff --git a/src/ts-tailwind/Animations/MagnetLines/MagnetLines.tsx b/src/ts-tailwind/Animations/MagnetLines/MagnetLines.tsx
index 0ca358a4f..502f25734 100644
--- a/src/ts-tailwind/Animations/MagnetLines/MagnetLines.tsx
+++ b/src/ts-tailwind/Animations/MagnetLines/MagnetLines.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, CSSProperties } from 'react';
+import React, { useRef, useEffect, type CSSProperties } from 'react';
 
 interface MagnetLinesProps {
   rows?: number;
diff --git a/src/ts-tailwind/Animations/OrbitImages/OrbitImages.tsx b/src/ts-tailwind/Animations/OrbitImages/OrbitImages.tsx
index 7c02d4c6c..95556994b 100644
--- a/src/ts-tailwind/Animations/OrbitImages/OrbitImages.tsx
+++ b/src/ts-tailwind/Animations/OrbitImages/OrbitImages.tsx
@@ -1,7 +1,7 @@
 // Component created by Dominik Koch
 // https://x.com/dominikkoch
 
-import { useMemo, useEffect, useLayoutEffect, useRef, useState, ReactNode } from 'react';
+import { useMemo, useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
 import { motion, useMotionValue, useTransform, animate, MotionValue } from 'motion/react';
 
 type OrbitShape =
diff --git a/src/ts-tailwind/Animations/PixelTrail/PixelTrail.tsx b/src/ts-tailwind/Animations/PixelTrail/PixelTrail.tsx
index 6d10e79a6..be3d6d6b6 100644
--- a/src/ts-tailwind/Animations/PixelTrail/PixelTrail.tsx
+++ b/src/ts-tailwind/Animations/PixelTrail/PixelTrail.tsx
@@ -1,5 +1,5 @@
 import { shaderMaterial, useTrailTexture } from '@react-three/drei';
-import { Canvas, CanvasProps, ThreeEvent, useThree } from '@react-three/fiber';
+import { Canvas, type CanvasProps, type ThreeEvent, useThree } from '@react-three/fiber';
 import React, { useEffect, useMemo } from 'react';
 import * as THREE from 'three';
 
diff --git a/src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx b/src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx
index 77bd0a317..1a6ebd4af 100644
--- a/src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx
+++ b/src/ts-tailwind/Animations/PixelTransition/PixelTransition.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, CSSProperties } from 'react';
+import React, { useRef, useEffect, useState, type CSSProperties } from 'react';
 import { gsap } from 'gsap';
 
 interface PixelTransitionProps {
diff --git a/src/ts-tailwind/Animations/ShapeBlur/ShapeBlur.tsx b/src/ts-tailwind/Animations/ShapeBlur/ShapeBlur.tsx
index 3c109927f..7a2617280 100644
--- a/src/ts-tailwind/Animations/ShapeBlur/ShapeBlur.tsx
+++ b/src/ts-tailwind/Animations/ShapeBlur/ShapeBlur.tsx
@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef } from 'react';
+import { type FC, useEffect, useRef } from 'react';
 import * as THREE from 'three';
 
 const vertexShader = /* glsl */ `
diff --git a/src/ts-tailwind/Animations/StickerPeel/StickerPeel.tsx b/src/ts-tailwind/Animations/StickerPeel/StickerPeel.tsx
index c3240d941..35d05a058 100644
--- a/src/ts-tailwind/Animations/StickerPeel/StickerPeel.tsx
+++ b/src/ts-tailwind/Animations/StickerPeel/StickerPeel.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect, useMemo, CSSProperties } from 'react';
+import { useRef, useEffect, useMemo, type CSSProperties } from 'react';
 import { gsap } from 'gsap';
 import { Draggable } from 'gsap/Draggable';
 
diff --git a/src/ts-tailwind/Animations/Strands/Strands.tsx b/src/ts-tailwind/Animations/Strands/Strands.tsx
index a7dfb04e9..5f33f1667 100644
--- a/src/ts-tailwind/Animations/Strands/Strands.tsx
+++ b/src/ts-tailwind/Animations/Strands/Strands.tsx
@@ -1,5 +1,5 @@
 import { Renderer, Program, Mesh, Color, Triangle, RenderTarget } from 'ogl';
-import { useEffect, useRef, CSSProperties } from 'react';
+import { useEffect, useRef, type CSSProperties } from 'react';
 
 const MAX_STRANDS = 12;
 const MAX_COLORS = 8;
diff --git a/src/ts-tailwind/Backgrounds/Ballpit/Ballpit.tsx b/src/ts-tailwind/Backgrounds/Ballpit/Ballpit.tsx
index 05eb478ee..6a2ad0921 100644
--- a/src/ts-tailwind/Backgrounds/Ballpit/Ballpit.tsx
+++ b/src/ts-tailwind/Backgrounds/Ballpit/Ballpit.tsx
@@ -22,7 +22,7 @@ import {
   Vector2,
   Vector3,
   WebGLRenderer,
-  WebGLRendererParameters
+  type WebGLRendererParameters
 } from 'three';
 import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
 
diff --git a/src/ts-tailwind/Backgrounds/Beams/Beams.tsx b/src/ts-tailwind/Backgrounds/Beams/Beams.tsx
index 64b5aa6fc..d7e2224dc 100644
--- a/src/ts-tailwind/Backgrounds/Beams/Beams.tsx
+++ b/src/ts-tailwind/Backgrounds/Beams/Beams.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useImperativeHandle, useEffect, useRef, useMemo, FC, ReactNode } from 'react';
+import { forwardRef, useImperativeHandle, useEffect, useRef, useMemo, type FC, type ReactNode } from 'react';
 
 import * as THREE from 'three';
 
diff --git a/src/ts-tailwind/Backgrounds/Dither/Dither.tsx b/src/ts-tailwind/Backgrounds/Dither/Dither.tsx
index 8d8f09cd4..0e799b3c3 100644
--- a/src/ts-tailwind/Backgrounds/Dither/Dither.tsx
+++ b/src/ts-tailwind/Backgrounds/Dither/Dither.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unknown-property */
 import { useRef, useState, useEffect, forwardRef } from 'react';
-import { Canvas, useFrame, useThree, ThreeEvent } from '@react-three/fiber';
+import { Canvas, useFrame, useThree, type ThreeEvent } from '@react-three/fiber';
 import { EffectComposer, wrapEffect } from '@react-three/postprocessing';
 import { Effect } from 'postprocessing';
 import * as THREE from 'three';
diff --git a/src/ts-tailwind/Backgrounds/GridMotion/GridMotion.tsx b/src/ts-tailwind/Backgrounds/GridMotion/GridMotion.tsx
index dd0ec9078..5f2873207 100644
--- a/src/ts-tailwind/Backgrounds/GridMotion/GridMotion.tsx
+++ b/src/ts-tailwind/Backgrounds/GridMotion/GridMotion.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, FC, ReactNode } from 'react';
+import { useEffect, useRef, type FC, type ReactNode } from 'react';
 import { gsap } from 'gsap';
 
 interface GridMotionProps {
diff --git a/src/ts-tailwind/Backgrounds/Hyperspeed/Hyperspeed.tsx b/src/ts-tailwind/Backgrounds/Hyperspeed/Hyperspeed.tsx
index c0729e2f3..accca25c5 100644
--- a/src/ts-tailwind/Backgrounds/Hyperspeed/Hyperspeed.tsx
+++ b/src/ts-tailwind/Backgrounds/Hyperspeed/Hyperspeed.tsx
@@ -1,5 +1,5 @@
 import { BloomEffect, EffectComposer, EffectPass, RenderPass, SMAAEffect, SMAAPreset } from 'postprocessing';
-import { FC, useEffect, useRef } from 'react';
+import { type FC, useEffect, useRef } from 'react';
 import * as THREE from 'three';
 
 interface Distortion {
diff --git a/src/ts-tailwind/Backgrounds/Silk/Silk.tsx b/src/ts-tailwind/Backgrounds/Silk/Silk.tsx
index 2305fea6f..724749f71 100644
--- a/src/ts-tailwind/Backgrounds/Silk/Silk.tsx
+++ b/src/ts-tailwind/Backgrounds/Silk/Silk.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable react/no-unknown-property */
 import React, { forwardRef, useMemo, useRef, useLayoutEffect, useEffect } from 'react';
-import { Canvas, useFrame, useThree, RootState } from '@react-three/fiber';
+import { Canvas, useFrame, useThree, type RootState } from '@react-three/fiber';
 import { Color, Mesh, ShaderMaterial } from 'three';
-import { IUniform } from 'three';
+import { type IUniform } from 'three';
 
 type NormalizedRGB = [number, number, number];
 
diff --git a/src/ts-tailwind/Backgrounds/Waves/Waves.tsx b/src/ts-tailwind/Backgrounds/Waves/Waves.tsx
index d33f456d8..7dacfc393 100644
--- a/src/ts-tailwind/Backgrounds/Waves/Waves.tsx
+++ b/src/ts-tailwind/Backgrounds/Waves/Waves.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, CSSProperties } from 'react';
+import React, { useRef, useEffect, type CSSProperties } from 'react';
 
 class Grad {
   x: number;
diff --git a/src/ts-tailwind/Components/AnimatedList/AnimatedList.tsx b/src/ts-tailwind/Components/AnimatedList/AnimatedList.tsx
index 944c80a3a..9b002215f 100644
--- a/src/ts-tailwind/Components/AnimatedList/AnimatedList.tsx
+++ b/src/ts-tailwind/Components/AnimatedList/AnimatedList.tsx
@@ -1,4 +1,12 @@
-import React, { useRef, useState, useEffect, useCallback, ReactNode, MouseEventHandler, UIEvent } from 'react';
+import React, {
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+  type MouseEventHandler,
+  type UIEvent
+} from 'react';
 import { motion, useInView } from 'motion/react';
 
 interface AnimatedItemProps {
diff --git a/src/ts-tailwind/Components/CardSwap/CardSwap.tsx b/src/ts-tailwind/Components/CardSwap/CardSwap.tsx
index f37676007..11d344aaa 100644
--- a/src/ts-tailwind/Components/CardSwap/CardSwap.tsx
+++ b/src/ts-tailwind/Components/CardSwap/CardSwap.tsx
@@ -3,9 +3,9 @@ import React, {
   cloneElement,
   forwardRef,
   isValidElement,
-  ReactElement,
-  ReactNode,
-  RefObject,
+  type ReactElement,
+  type ReactNode,
+  type RefObject,
   useEffect,
   useMemo,
   useRef
diff --git a/src/ts-tailwind/Components/Carousel/Carousel.tsx b/src/ts-tailwind/Components/Carousel/Carousel.tsx
index 78c05fb55..939980672 100644
--- a/src/ts-tailwind/Components/Carousel/Carousel.tsx
+++ b/src/ts-tailwind/Components/Carousel/Carousel.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { motion, PanInfo, useMotionValue, useTransform } from 'motion/react';
-import React, { JSX } from 'react';
+import { motion, type PanInfo, useMotionValue, useTransform } from 'motion/react';
+import React, { type JSX } from 'react';
 
 // replace icons with your own if needed
 import { FiCircle, FiCode, FiFileText, FiLayers, FiLayout } from 'react-icons/fi';
diff --git a/src/ts-tailwind/Components/DecayCard/DecayCard.tsx b/src/ts-tailwind/Components/DecayCard/DecayCard.tsx
index 2dbd2e2a3..bcf0f773d 100644
--- a/src/ts-tailwind/Components/DecayCard/DecayCard.tsx
+++ b/src/ts-tailwind/Components/DecayCard/DecayCard.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, ReactNode } from 'react';
+import React, { useEffect, useRef, type ReactNode } from 'react';
 import { gsap } from 'gsap';
 
 interface DecayCardProps {
diff --git a/src/ts-tailwind/Components/FluidGlass/FluidGlass.tsx b/src/ts-tailwind/Components/FluidGlass/FluidGlass.tsx
index c1d256bdd..a17a7d9a7 100644
--- a/src/ts-tailwind/Components/FluidGlass/FluidGlass.tsx
+++ b/src/ts-tailwind/Components/FluidGlass/FluidGlass.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unknown-property */
 import * as THREE from 'three';
-import { useRef, useState, useEffect, memo, ReactNode } from 'react';
-import { Canvas, createPortal, useFrame, useThree, ThreeElements } from '@react-three/fiber';
+import { useRef, useState, useEffect, memo, type ReactNode } from 'react';
+import { Canvas, createPortal, useFrame, useThree, type ThreeElements } from '@react-three/fiber';
 import {
   useFBO,
   useGLTF,
diff --git a/src/ts-tailwind/Components/InfiniteMenu/InfiniteMenu.tsx b/src/ts-tailwind/Components/InfiniteMenu/InfiniteMenu.tsx
index 08890fdab..687feca99 100644
--- a/src/ts-tailwind/Components/InfiniteMenu/InfiniteMenu.tsx
+++ b/src/ts-tailwind/Components/InfiniteMenu/InfiniteMenu.tsx
@@ -1,4 +1,4 @@
-import { FC, useRef, useState, useEffect, MutableRefObject } from 'react';
+import { type FC, useRef, useState, useEffect, type MutableRefObject } from 'react';
 import { mat4, quat, vec2, vec3 } from 'gl-matrix';
 
 const discVertShaderSource = `#version 300 es
diff --git a/src/ts-tailwind/Components/LineSidebar/LineSidebar.tsx b/src/ts-tailwind/Components/LineSidebar/LineSidebar.tsx
index d7409c85e..8efe9b38f 100644
--- a/src/ts-tailwind/Components/LineSidebar/LineSidebar.tsx
+++ b/src/ts-tailwind/Components/LineSidebar/LineSidebar.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback, useEffect, CSSProperties } from 'react';
+import { useRef, useState, useCallback, useEffect, type CSSProperties } from 'react';
 
 type Falloff = 'linear' | 'smooth' | 'sharp';
 
diff --git a/src/ts-tailwind/Components/ModelViewer/ModelViewer.tsx b/src/ts-tailwind/Components/ModelViewer/ModelViewer.tsx
index 9488cd2e8..7fb498f6f 100644
--- a/src/ts-tailwind/Components/ModelViewer/ModelViewer.tsx
+++ b/src/ts-tailwind/Components/ModelViewer/ModelViewer.tsx
@@ -1,4 +1,4 @@
-import { FC, Suspense, useRef, useLayoutEffect, useEffect, useMemo } from 'react';
+import { type FC, Suspense, useRef, useLayoutEffect, useEffect, useMemo } from 'react';
 import { Canvas, useFrame, useLoader, useThree, invalidate } from '@react-three/fiber';
 import { OrbitControls, useGLTF, useFBX, useProgress, Html, Environment, ContactShadows } from '@react-three/drei';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
diff --git a/src/ts-tailwind/Components/OptionWheel/OptionWheel.tsx b/src/ts-tailwind/Components/OptionWheel/OptionWheel.tsx
index 56b346ab8..5f0e4b76f 100644
--- a/src/ts-tailwind/Components/OptionWheel/OptionWheel.tsx
+++ b/src/ts-tailwind/Components/OptionWheel/OptionWheel.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback, useEffect, CSSProperties } from 'react';
+import { useRef, useState, useCallback, useEffect, type CSSProperties } from 'react';
 
 type Side = 'left' | 'right';
 
diff --git a/src/ts-tailwind/Components/PixelCard/PixelCard.tsx b/src/ts-tailwind/Components/PixelCard/PixelCard.tsx
index fa6402a19..6add9eb39 100644
--- a/src/ts-tailwind/Components/PixelCard/PixelCard.tsx
+++ b/src/ts-tailwind/Components/PixelCard/PixelCard.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { JSX } from 'react';
+import { type JSX } from 'react';
 
 class Pixel {
   width: number;
diff --git a/src/ts-tailwind/Components/SpecularButton/SpecularButton.tsx b/src/ts-tailwind/Components/SpecularButton/SpecularButton.tsx
index 622231050..0d54c82f7 100644
--- a/src/ts-tailwind/Components/SpecularButton/SpecularButton.tsx
+++ b/src/ts-tailwind/Components/SpecularButton/SpecularButton.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect, CSSProperties, ReactNode, MouseEventHandler } from 'react';
+import { useRef, useEffect, type CSSProperties, type ReactNode, type MouseEventHandler } from 'react';
 import { Renderer, Program, Mesh, Triangle, Color } from 'ogl';
 
 type ButtonSize = 'sm' | 'md' | 'lg';
diff --git a/src/ts-tailwind/Components/Stepper/Stepper.tsx b/src/ts-tailwind/Components/Stepper/Stepper.tsx
index 5963c460f..8ea9be44c 100644
--- a/src/ts-tailwind/Components/Stepper/Stepper.tsx
+++ b/src/ts-tailwind/Components/Stepper/Stepper.tsx
@@ -1,5 +1,5 @@
-import React, { useState, Children, useRef, useLayoutEffect, HTMLAttributes, ReactNode } from 'react';
-import { motion, AnimatePresence, Variants } from 'motion/react';
+import React, { useState, Children, useRef, useLayoutEffect, type HTMLAttributes, type ReactNode } from 'react';
+import { motion, AnimatePresence, type Variants } from 'motion/react';
 
 interface StepperProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
diff --git a/src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx b/src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx
index 330d7e069..1f1dd4cc3 100644
--- a/src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx
+++ b/src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx
@@ -1,4 +1,4 @@
-import { motion, Transition, Easing } from 'motion/react';
+import { motion, type Transition, type Easing } from 'motion/react';
 import { useEffect, useRef, useState, useMemo } from 'react';
 
 type BlurTextProps = {
diff --git a/src/ts-tailwind/TextAnimations/CircularText/CircularText.tsx b/src/ts-tailwind/TextAnimations/CircularText/CircularText.tsx
index 57d705a49..15c999062 100644
--- a/src/ts-tailwind/TextAnimations/CircularText/CircularText.tsx
+++ b/src/ts-tailwind/TextAnimations/CircularText/CircularText.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { motion, useAnimation, useMotionValue, MotionValue, Transition } from 'motion/react';
+import { motion, useAnimation, useMotionValue, MotionValue, type Transition } from 'motion/react';
 interface CircularTextProps {
   text: string;
   spinDuration?: number;
diff --git a/src/ts-tailwind/TextAnimations/CurvedLoop/CurvedLoop.tsx b/src/ts-tailwind/TextAnimations/CurvedLoop/CurvedLoop.tsx
index df7c57e64..249f94975 100644
--- a/src/ts-tailwind/TextAnimations/CurvedLoop/CurvedLoop.tsx
+++ b/src/ts-tailwind/TextAnimations/CurvedLoop/CurvedLoop.tsx
@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState, useMemo, useId, FC, PointerEvent } from 'react';
+import { useRef, useEffect, useState, useMemo, useId, type FC, type PointerEvent } from 'react';
 
 interface CurvedLoopProps {
   marqueeText?: string;
diff --git a/src/ts-tailwind/TextAnimations/GlitchText/GlitchText.tsx b/src/ts-tailwind/TextAnimations/GlitchText/GlitchText.tsx
index 0455e9817..fbb8aa632 100644
--- a/src/ts-tailwind/TextAnimations/GlitchText/GlitchText.tsx
+++ b/src/ts-tailwind/TextAnimations/GlitchText/GlitchText.tsx
@@ -1,4 +1,4 @@
-import { FC, CSSProperties } from 'react';
+import { type FC, type CSSProperties } from 'react';
 
 interface GlitchTextProps {
   children: string;
diff --git a/src/ts-tailwind/TextAnimations/GradientText/GradientText.tsx b/src/ts-tailwind/TextAnimations/GradientText/GradientText.tsx
index 5ab05bbb5..618b54ef7 100644
--- a/src/ts-tailwind/TextAnimations/GradientText/GradientText.tsx
+++ b/src/ts-tailwind/TextAnimations/GradientText/GradientText.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef, ReactNode } from 'react';
+import { useState, useCallback, useEffect, useRef, type ReactNode } from 'react';
 import { motion, useMotionValue, useAnimationFrame, useTransform } from 'motion/react';
 
 interface GradientTextProps {
diff --git a/src/ts-tailwind/TextAnimations/RotatingText/RotatingText.tsx b/src/ts-tailwind/TextAnimations/RotatingText/RotatingText.tsx
index 67a752969..8c5d794a1 100644
--- a/src/ts-tailwind/TextAnimations/RotatingText/RotatingText.tsx
+++ b/src/ts-tailwind/TextAnimations/RotatingText/RotatingText.tsx
@@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo
 import {
   motion,
   AnimatePresence,
-  Transition,
+  type Transition,
   type VariantLabels,
   type Target,
   type TargetAndTransition
diff --git a/src/ts-tailwind/TextAnimations/ScrollFloat/ScrollFloat.tsx b/src/ts-tailwind/TextAnimations/ScrollFloat/ScrollFloat.tsx
index f940be949..789668f0c 100644
--- a/src/ts-tailwind/TextAnimations/ScrollFloat/ScrollFloat.tsx
+++ b/src/ts-tailwind/TextAnimations/ScrollFloat/ScrollFloat.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, ReactNode, RefObject } from 'react';
+import React, { useEffect, useMemo, useRef, type ReactNode, type RefObject } from 'react';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
diff --git a/src/ts-tailwind/TextAnimations/ScrollReveal/ScrollReveal.tsx b/src/ts-tailwind/TextAnimations/ScrollReveal/ScrollReveal.tsx
index d36df1ce0..17a815c4b 100644
--- a/src/ts-tailwind/TextAnimations/ScrollReveal/ScrollReveal.tsx
+++ b/src/ts-tailwind/TextAnimations/ScrollReveal/ScrollReveal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useMemo, ReactNode, RefObject } from 'react';
+import React, { useEffect, useRef, useMemo, type ReactNode, type RefObject } from 'react';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 
diff --git a/src/ts-tailwind/TextAnimations/Shuffle/Shuffle.tsx b/src/ts-tailwind/TextAnimations/Shuffle/Shuffle.tsx
index ece182771..77481b55e 100644
--- a/src/ts-tailwind/TextAnimations/Shuffle/Shuffle.tsx
+++ b/src/ts-tailwind/TextAnimations/Shuffle/Shuffle.tsx
@@ -3,7 +3,7 @@ import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { SplitText as GSAPSplitText } from 'gsap/SplitText';
 import { useGSAP } from '@gsap/react';
-import { JSX } from 'react';
+import { type JSX } from 'react';
 
 gsap.registerPlugin(ScrollTrigger, GSAPSplitText);
 
diff --git a/src/ts-tailwind/TextAnimations/TextType/TextType.tsx b/src/ts-tailwind/TextAnimations/TextType/TextType.tsx
index 8e26364ec..67db53f9a 100644
--- a/src/ts-tailwind/TextAnimations/TextType/TextType.tsx
+++ b/src/ts-tailwind/TextAnimations/TextType/TextType.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ElementType, useEffect, useRef, useState, createElement, useMemo, useCallback } from 'react';
+import { type ElementType, useEffect, useRef, useState, createElement, useMemo, useCallback } from 'react';
 import { gsap } from 'gsap';
 
 interface TextTypeProps {
diff --git a/src/ts-tailwind/TextAnimations/VariableProximity/VariableProximity.tsx b/src/ts-tailwind/TextAnimations/VariableProximity/VariableProximity.tsx
index 51510bbe3..5fb62e085 100644
--- a/src/ts-tailwind/TextAnimations/VariableProximity/VariableProximity.tsx
+++ b/src/ts-tailwind/TextAnimations/VariableProximity/VariableProximity.tsx
@@ -1,4 +1,12 @@
-import { forwardRef, useMemo, useRef, useEffect, MutableRefObject, CSSProperties, HTMLAttributes } from 'react';
+import {
+  forwardRef,
+  useMemo,
+  useRef,
+  useEffect,
+  type MutableRefObject,
+  type CSSProperties,
+  type HTMLAttributes
+} from 'react';
 import { motion } from 'motion/react';
 
 function useAnimationFrame(callback: () => void) {