Optimize Brand Accent Component

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();
   }
 }

src/app/components/clock/clock.scss

@@ -16,11 +16,11 @@
 .clock-date {
   font-size: 1.2rem;
   font-weight: 500;
-  color: oklch(0.3211 0 0); // #333
+  color: light-dark(oklch(0.3211 0 0), oklch(0.6789 0 0)); // #333
 }
 
 .clock-time {
   font-size: 2rem;
   font-weight: 600;
-  color: oklch(0 0 0); // #000
+  color: light-dark(oklch(0 0 0), oklch(1 0 0)); // #000
 }