fix(story): harden notebook interaction and fallback

app/components/story/ReelDirector.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 
 /**
  * ReelDirector — motor de animação "vídeo-ao-rolar" para a página inteira.
@@ -47,10 +47,8 @@ const TO_VARS = {
 };
 
 export default function ReelDirector() {
-  const alive = useRef(true);
-
   useEffect(() => {
-    alive.current = true;
+    let cancelled = false;
     if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
       return undefined;
 
@@ -64,14 +62,14 @@ export default function ReelDirector() {
         import("gsap"),
         import("gsap/ScrollTrigger"),
       ]);
-      if (!alive.current) return;
+      if (cancelled) return;
       gsap.registerPlugin(ScrollTrigger);
 
       const done = new WeakSet<Element>();
 
       const ctx = gsap.context(() => {
         const scan = () => {
-          if (!alive.current) return;
+          if (cancelled) return;
           for (const el of document.querySelectorAll<HTMLElement>(
             "[data-reel]",
           )) {
@@ -94,24 +92,21 @@ export default function ReelDirector() {
           )) {
             if (done.has(container)) continue;
             done.add(container);
-            const dir = (container.dataset.reelStagger || "bottom") as Direction;
+            const dir = (container.dataset.reelStagger ||
+              "bottom") as Direction;
             const dist = Number(container.dataset.reelDistance || DISTANCE);
             const children = Array.from(container.children) as HTMLElement[];
             if (children.length === 0) continue;
-            gsap.fromTo(
-              children,
-              fromVars(dir, dist),
-              {
-                ...TO_VARS,
-                stagger: { each: 0.09 },
-                scrollTrigger: {
-                  trigger: container,
-                  start: container.dataset.reelStart || "top 85%",
-                  end: container.dataset.reelEnd || "top 25%",
-                  scrub: 0.6,
-                },
+            gsap.fromTo(children, fromVars(dir, dist), {
+              ...TO_VARS,
+              stagger: { each: 0.09 },
+              scrollTrigger: {
+                trigger: container,
+                start: container.dataset.reelStart || "top 85%",
+                end: container.dataset.reelEnd || "top 25%",
+                scrub: 0.6,
               },
-            );
+            });
           }
         };
 
@@ -142,7 +137,7 @@ export default function ReelDirector() {
 
     void boot();
     return () => {
-      alive.current = false;
+      cancelled = true;
       window.cancelAnimationFrame(raf1);
       window.cancelAnimationFrame(raf2);
       window.clearTimeout(timer);