diff --git a/src/components/effects/GradientBlinds.test.tsx b/src/components/effects/GradientBlinds.test.tsx
index 4a2789c..e29a176 100644
--- a/src/components/effects/GradientBlinds.test.tsx
+++ b/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();
+ 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();
- // 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
diff --git a/src/components/effects/GradientBlinds.tsx b/src/components/effects/GradientBlinds.tsx
index 735c48e..7a1595e 100644
--- a/src/components/effects/GradientBlinds.tsx
+++ b/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);