diff --git a/src/ts-default/TextAnimations/BlurText/BlurText.tsx b/src/ts-default/TextAnimations/BlurText/BlurText.tsx
index a258c5c9..d5e45260 100644
--- a/src/ts-default/TextAnimations/BlurText/BlurText.tsx
+++ b/src/ts-default/TextAnimations/BlurText/BlurText.tsx
@@ -1,6 +1,8 @@
 import { useSprings, animated, SpringValue } from '@react-spring/web';
 import { useRef, useEffect, useState } from 'react';
 
+const AnimatedSpan = animated.span as React.FC<React.HTMLAttributes<HTMLSpanElement>>;
+
 type BlurTextProps = {
   text?: string;
   delay?: number;
@@ -90,7 +92,7 @@ const BlurText: React.FC<BlurTextProps> = ({
       style={{ display: 'flex', flexWrap: 'wrap' }}
     >
       {springs.map((props, index) => (
-        <animated.span
+        <AnimatedSpan
           key={index}
           style={{
             ...props,
@@ -100,7 +102,7 @@ const BlurText: React.FC<BlurTextProps> = ({
         >
           {elements[index] === ' ' ? '\u00A0' : elements[index]}
           {animateBy === 'words' && index < elements.length - 1 && '\u00A0'}
-        </animated.span>
+        </AnimatedSpan>
       ))}
     </p>
   );
diff --git a/src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx b/src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx
index fd89e1a3..236c599d 100644
--- a/src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx
+++ b/src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx
@@ -1,6 +1,8 @@
 import { useRef, useEffect, useState } from 'react';
 import { useSprings, animated, SpringValue } from '@react-spring/web';
 
+const AnimatedSpan = animated.span as React.FC<React.HTMLAttributes<HTMLSpanElement>>;
+
 interface BlurTextProps {
   text?: string;
   delay?: number;
@@ -90,14 +92,14 @@ const BlurText: React.FC<BlurTextProps> = ({
   return (
     <p ref={ref} className={`blur-text ${className} flex flex-wrap`}>
       {springs.map((props, index) => (
-        <animated.span
+        <AnimatedSpan
           key={index}
           style={props}
           className="inline-block transition-transform will-change-[transform,filter,opacity]"
         >
           {elements[index] === ' ' ? '\u00A0' : elements[index]}
           {animateBy === 'words' && index < elements.length - 1 && '\u00A0'}
-        </animated.span>
+        </AnimatedSpan>
       ))}
     </p>
   );