bitzzdev

1// Viewport animation manager:
2// All scenes visible in the viewport animate simultaneously with NO artificial limit.
3// Only when a scene scrolls completely off-screen does it pause on its current frame to conserve battery/RAM.
4 
5type ActiveCallback = (active: boolean) => void;
6 
7interface SceneEntry {
8  id: string;
9  element: HTMLElement;
10  callback: ActiveCallback;
11  isActive: boolean;
12}
13 
14const entries = new Map<string, SceneEntry>();
15let observer: IntersectionObserver | null = null;
16 
17function initObserver() {
18  if (typeof window === "undefined" || observer) return;
19 
20  observer = new IntersectionObserver(
21    (observerEntries) => {
22      for (const obsEntry of observerEntries) {
23        const id = (obsEntry.target as HTMLElement).dataset.sceneId;
24        if (!id || !entries.has(id)) continue;
25 
26        const item = entries.get(id)!;
27        const isVisible = obsEntry.isIntersecting;
28 
29        if (item.isActive !== isVisible) {
30          item.isActive = isVisible;
31          item.callback(isVisible);
32        }
33      }
34    },
35    {
36      // Generous buffer margin so scenes are already actively running before reaching the edge
37      rootMargin: "80px 0px 80px 0px",
38      threshold: 0,
39    }
40  );
41}
42 
43let nextId = 0;
44 
45export function registerScene(element: HTMLElement, onActiveChange: ActiveCallback): () => void {
46  const id = `scene-${++nextId}`;
47  element.dataset.sceneId = id;
48 
49  initObserver();
50 
51  const entry: SceneEntry = {
52    id,
53    element,
54    callback: onActiveChange,
55    isActive: false,
56  };
57 
58  entries.set(id, entry);
59  observer?.observe(element);
60 
61  return () => {
62    observer?.unobserve(element);
63    entries.delete(id);
64  };
65}
66