refactor to use existing animated components

src/app/_providers/GsapProvicer.tsx

@@ -103,13 +103,6 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     return () => { console.log("gsap cleanup") }
   })
 
-  const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => {
-    tl.current?.add(animation, position);
-  },[])
-  const schedule = useCallback((fn: () => void, position: gsap.Position) => {
-    tl.current?.add(fn, position)
-  },[])
-
   // Handoff: fire registered callbacks once, when the entrance finishes.
   const readyFired = useRef(false)
   const readyCbs = useRef<Array<() => void>>([])
@@ -124,6 +117,21 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     else readyCbs.current.push(cb)
   },[])
 
+  const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => {
+    // Content can mount in waves (e.g. nested queries resolving after the
+    // entrance already played). Parking a tween in a finished, paused timeline
+    // would freeze it at its from-state, so once the entrance is done let the
+    // (live) tween play on its own instead.
+    if (readyFired.current) return
+    tl.current?.add(animation, position);
+  },[])
+  const schedule = useCallback((fn: () => void, position: gsap.Position) => {
+    // Same late-arrival case: a callback added past the playhead never fires, so
+    // run the reveal immediately once the entrance has finished.
+    if (readyFired.current) { fn(); return }
+    tl.current?.add(fn, position)
+  },[])
+
   // Throttle ScrollTrigger.refresh() to once per frame so the ResizeObserver
   // can fire freely while content height animates.
   const refreshQueued = useRef(false)