From 9fbd2db1979745e0fa6a19a5fd0fcd558970095a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=BB=A8=ED=8A=B8=EB=A1=A4DELTA?= <controld3785@gmail.com>
Date: Wed, 8 Apr 2026 13:00:55 +0900
Subject: [PATCH] Optimize Brand Accent Component

---
 .../components/brand-accent/brand-accent.ts   | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/app/components/brand-accent/brand-accent.ts b/src/app/components/brand-accent/brand-accent.ts
index 7139e00..8adc7e3 100644
--- a/src/app/components/brand-accent/brand-accent.ts
+++ b/src/app/components/brand-accent/brand-accent.ts
@@ -21,13 +21,15 @@ import { SettingsService } from '../../services/settings.service';
 export class BrandAccent implements OnDestroy {
   @ViewChild('canvasElement') canvasRef!: ElementRef<HTMLCanvasElement>;
   private ctx!: CanvasRenderingContext2D;
-  private resizeObserver?: ResizeObserver;
   private settingsService = inject(SettingsService);
 
   private canvasNativeSize: [number, number] = [0, 0];
   private bgGradient!: CanvasGradient;
   private gridGradient!: CanvasGradient;
 
+  private resizeObserver?: ResizeObserver;
+  private intersectionObserver?: IntersectionObserver;
+
   private animation: {
     id?: number;
     startTime: number;
@@ -61,11 +63,23 @@ export class BrandAccent implements OnDestroy {
         this.resizeObserver = new ResizeObserver(() => this.resize());
         this.resizeObserver.observe(this.canvasRef.nativeElement);
 
+        this.intersectionObserver = new IntersectionObserver(
+          (entries) => {
+            if (entries[0].isIntersecting) {
+              if (!this.animation.id) this.animate(performance.now());
+            } else if (this.animation.id) {
+              cancelAnimationFrame(this.animation.id);
+              this.animation.id = undefined;
+            }
+          }, { rootMargin: '200px' }
+        );
+        this.intersectionObserver.observe(this.canvasRef.nativeElement);
+
         this.resize(); // Safe Initialization
         this.animation.startTime = performance.now();
-        this.draw();
 
-        this.animate(performance.now());
+        this.draw();
+        // this.animate(performance.now());
       });
     });
   }
@@ -219,9 +233,8 @@ export class BrandAccent implements OnDestroy {
   }
 
   ngOnDestroy() {
-    if (this.animation.id) {
-      cancelAnimationFrame(this.animation.id);
-    }
+    if (this.animation.id) cancelAnimationFrame(this.animation.id);
     this.resizeObserver?.disconnect();
+    this.intersectionObserver?.disconnect();
   }
 }