From 358c129951f7751e3f3c3013904b053e04da5f81 Mon Sep 17 00:00:00 2001
From: Nebulae <sabrina.b@nebulae-design.com>
Date: Fri, 10 Apr 2026 12:21:40 +0200
Subject: [PATCH] feat(setup preprod)

---
 .../features/home/PawsScrollAnimation.tsx     | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/features/home/PawsScrollAnimation.tsx b/resources/js/components/features/home/PawsScrollAnimation.tsx
index aa606b1..8e71dbb 100644
--- a/resources/js/components/features/home/PawsScrollAnimation.tsx
+++ b/resources/js/components/features/home/PawsScrollAnimation.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import { useScrollProgress } from '@/hooks/use-scroll-progress';
 
 /**
@@ -48,8 +49,32 @@ interface Props {
     side: 'left' | 'right';
 }
 
+const LERP_FACTOR = 0.06;
+
 export function PawsScrollAnimation({ elementId, side }: Props) {
-    const progress = useScrollProgress(elementId);
+    const rawProgress = useScrollProgress(elementId);
+    const targetRef = useRef(rawProgress);
+    const smoothRef = useRef(rawProgress);
+    const rafRef = useRef<number>(0);
+    const [progress, setProgress] = useState(rawProgress);
+
+    useEffect(() => {
+        targetRef.current = rawProgress;
+    }, [rawProgress]);
+
+    useEffect(() => {
+        const animate = () => {
+            const diff = targetRef.current - smoothRef.current;
+            if (Math.abs(diff) > 0.0005) {
+                smoothRef.current += diff * LERP_FACTOR;
+                setProgress(smoothRef.current);
+            }
+            rafRef.current = requestAnimationFrame(animate);
+        };
+
+        rafRef.current = requestAnimationFrame(animate);
+        return () => cancelAnimationFrame(rafRef.current);
+    }, []);
 
     return (
         <div