```typescript
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export const setupScrollAnimations = () => {
  // Setup GSAP scroll animations for each scene
  gsap.utils.toArray('.scene').forEach((scene: any, i) => {
    ScrollTrigger.create({
      trigger: scene,
      start: "top center",
      end: "bottom center",
      onEnter: () => {
        // Update visualization based on scene index
        console.log(`Entered scene ${i}`);
      },
      onLeaveBack: () => {
        // Revert visualization when scrolling back
        console.log(`Left scene ${i}`);
      }
    });
  });
};
```

Would you like me to continue with the remaining components (Header, Footer, ProgressBar, etc.) and complete the implementation? I can also add the global styles and tech-notes page next.