From 8e1b00da2a631ea633bb9d1d47c43761b2f78971 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Tue, 15 Jul 2025 23:54:16 -0400
Subject: [PATCH] fix: correct useSprings implementation in SplitText component

---
 packages/client/src/components/SplitText.tsx | 32 +++++++++++---------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/components/SplitText.tsx b/packages/client/src/components/SplitText.tsx
index f7cd8d4c8f..46dd757365 100644
--- a/packages/client/src/components/SplitText.tsx
+++ b/packages/client/src/components/SplitText.tsx
@@ -77,20 +77,24 @@ const SplitText: React.FC<SplitTextProps> = ({
   const ref = useRef<HTMLParagraphElement>(null);
   const animatedCount = useRef(0);
 
-  const springs = useSprings(letters.length, (i) => ({
-    from: animationFrom,
-    to: inView
-      ? async (next) => {
-          await next(animationTo);
-          animatedCount.current += 1;
-          if (animatedCount.current === letters.length && onLetterAnimationComplete) {
-            onLetterAnimationComplete();
+  const [springs] = useSprings(
+    letters.length,
+    (i) => ({
+      from: animationFrom,
+      to: inView
+        ? async (next) => {
+            await next(animationTo);
+            animatedCount.current += 1;
+            if (animatedCount.current === letters.length && onLetterAnimationComplete) {
+              onLetterAnimationComplete();
+            }
           }
-        }
-      : animationFrom,
-    delay: i * delay,
-    config: { easing },
-  }));
+        : animationFrom,
+      delay: i * delay,
+      config: { easing },
+    }),
+    [inView, text, delay, animationFrom, animationTo, easing, onLetterAnimationComplete],
+  );
 
   useEffect(() => {
     const observer = new IntersectionObserver(
@@ -147,7 +151,7 @@ const SplitText: React.FC<SplitTextProps> = ({
               return (
                 <animated.span
                   key={index}
-                  style={springs[index] as unknown as React.CSSProperties}
+                  style={springs[index]}
                   className="inline-block transform transition-opacity will-change-transform"
                 >
                   {letter}