From 3863f9831aac28c8a09bf256c882570a30542055 Mon Sep 17 00:00:00 2001
From: Dryd3n <31601254+Dryd33n@users.noreply.github.com>
Date: Mon, 10 Mar 2025 13:45:01 -0700
Subject: [PATCH 1/2] Fix typescript typing issue for animated span

fix(BlurText): resolve TypeScript error by explicitly typing style prop
---
 src/ts-tailwind/TextAnimations/BlurText/BlurText.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

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>
   );

From 6f3aa66325ec4c90ef67c9da709b88e55e43ebd3 Mon Sep 17 00:00:00 2001
From: Dryd3n <31601254+Dryd33n@users.noreply.github.com>
Date: Mon, 10 Mar 2025 13:51:17 -0700
Subject: [PATCH 2/2] Update BlurText.tsx

fix non tailwind version
---
 src/ts-default/TextAnimations/BlurText/BlurText.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

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>
   );