⚡ bolt: [performance improvement]

.jules/bolt.md

@@ -1,3 +1,6 @@
 ## 2024-05-16 - [Frontend Performance: Caching getBoundingClientRect in Animation Loops]
 **Learning:** Frequent calls to `getBoundingClientRect()` inside `requestAnimationFrame` loops or scroll handlers (like in `MagneticLetters`, `MobileTouchRepel`, and `ParallaxLayers`) cause significant layout thrashing and forced synchronous layouts, degrading rendering performance.
-**Action:** Always pre-calculate and cache document-relative element positions during initialization (`init()`). Update this cache on window resize events and after custom fonts load (using `document.fonts.ready.then()`). During active animations (`animate()`, `update()`, etc.), calculate viewport-relative positions using the cached document coordinates minus the current scroll offset (`window.scrollX` / `window.scrollY`) instead of directly querying the DOM.
+**Action:** Always pre-calculate and cache document-relative element positions during initialization (`init()`). Update this cache on window resize events and after custom fonts load (using `document.fonts.ready.then()`). During active animations (`animate()`, `update()`, etc.), calculate viewport-relative positions using the cached document coordinates minus the current scroll offset (`window.scrollX` / `window.scrollY`) instead of directly querying the DOM.
+## 2024-05-16 - [Performance Optimization: Use IntersectionObserver to Replace Synchronous getBoundingClientRect]
+**Learning:** Checking element visibility synchronously via `getBoundingClientRect` (like in `PhotoCarousel.isInView()`) inside high-frequency event handlers (e.g. scroll, mousewheel, keydown) causes forced synchronous layout thrashing.
+**Action:** Always prefer caching the visibility state asynchronously using `IntersectionObserver` when you only need to know if an element is in view, and read that cached boolean instead of calling `getBoundingClientRect`.

script.js

@@ -864,6 +864,8 @@ const PhotoCarousel = {
   currentIndex: 2, // Start with center card (index 2)
   positions: ['far-left', 'left', 'center', 'right', 'far-right'],
   isAnimating: false,
+  isVisible: false, // ⚡ bolt: cache visibility state to prevent layout thrashing
+  observer: null,
 
   init() {
     this.carousel = document.getElementById('photo-carousel');
@@ -916,6 +918,14 @@ const PhotoCarousel = {
       }
     }, { passive: false });
 
+    // ⚡ bolt: use intersectionobserver instead of getboundingclientrect
+    this.observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        this.isVisible = entry.isIntersecting;
+      });
+    }, { threshold: 0.1 });
+    this.observer.observe(this.carousel);
+
     // Get the stack element early for all event handlers
     const stack = this.carousel.querySelector('.carousel-stack');
 
@@ -1028,9 +1038,8 @@ const PhotoCarousel = {
   },
 
   isInView() {
-    if (!this.carousel) return false;
-    const rect = this.carousel.getBoundingClientRect();
-    return rect.top < window.innerHeight && rect.bottom > 0;
+    // ⚡ bolt: return cached state instead of synchronous layout query
+    return this.isVisible;
   },
 
   navigate(direction) {