Merge pull request #10 from ragusa-it/optimize-gradient-blinds-intersection-observer-8465585914404469487

Optimize GradientBlinds with IntersectionObserver

src/components/effects/GradientBlinds.test.tsx

@@ -66,8 +66,17 @@ describe('GradientBlinds', () => {
     vi.clearAllMocks();
   });
 
-  it('starts animation loop on mount', () => {
+  it('does not start animation loop on mount until visible', () => {
     const { unmount } = render(<GradientBlinds />);
+    expect(rafSpy).not.toHaveBeenCalled();
+
+    // Simulate on-screen
+    act(() => {
+      if (ioCallback) {
+        ioCallback([{ isIntersecting: true } as IntersectionObserverEntry]);
+      }
+    });
+
     expect(rafSpy).toHaveBeenCalled();
     unmount();
     expect(cancelRafSpy).toHaveBeenCalled();
@@ -76,7 +85,15 @@ describe('GradientBlinds', () => {
   it('pauses animation loop when off-screen and resumes when on-screen', () => {
     const { unmount } = render(<GradientBlinds />);
 
-    // Initial start
+    // Should not start initially
+    expect(rafSpy).not.toHaveBeenCalled();
+
+    // Simulate on-screen (start)
+    act(() => {
+      if (ioCallback) {
+        ioCallback([{ isIntersecting: true } as IntersectionObserverEntry]);
+      }
+    });
     expect(rafSpy).toHaveBeenCalledTimes(1);
 
     // Reset spies to check for subsequent calls

src/components/effects/GradientBlinds.tsx

@@ -349,8 +349,6 @@ void main() {
     });
     observer.observe(container);
 
-    rafRef.current = requestAnimationFrame(loop);
-
     return () => {
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
       canvas.removeEventListener('pointermove', onPointerMove);