fixed ring around click on button

src/components/interactive-background/interactive-background.ts

@@ -1,4 +1,5 @@
-import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild, inject } from '@angular/core';
+import { NavigationStart, Router } from '@angular/router';
 
 type PointerState = {
   x: number;
@@ -276,6 +277,7 @@ class ParticleEngine {
 })
 export class InteractiveBackground implements AfterViewInit, OnDestroy {
   @ViewChild('canvas', { static: true }) private readonly canvasRef!: ElementRef<HTMLCanvasElement>;
+  private readonly router = inject(Router);
 
   isCursorVisible = InteractiveBackground.detectFinePointer();
   isPointerDown = false;
@@ -330,6 +332,11 @@ export class InteractiveBackground implements AfterViewInit, OnDestroy {
     const onTouchCancel = () => this.handlePointerLeave();
 
     const onMotionChange = (event: MediaQueryListEvent) => this.handleMotionPreferenceChange(event.matches);
+    const routerSubscription = this.router.events.subscribe((event) => {
+      if (event instanceof NavigationStart) {
+        this.resetPointerInteraction();
+      }
+    });
 
     window.addEventListener('resize', onResize);
 
@@ -368,6 +375,7 @@ export class InteractiveBackground implements AfterViewInit, OnDestroy {
       () => window.removeEventListener('touchend', onTouchEnd),
       () => window.removeEventListener('touchcancel', onTouchCancel),
       () => this.mediaQuery.removeEventListener('change', onMotionChange),
+      () => routerSubscription.unsubscribe(),
     ];
   }
 
@@ -452,11 +460,11 @@ export class InteractiveBackground implements AfterViewInit, OnDestroy {
       }
 
       this.activeTouchId = null;
-      this.pointerActive = false;
+      this.resetPointerInteraction();
       return;
     }
 
-    this.updatePointer(event.clientX, event.clientY, true);
+    this.resetPointerInteraction();
   }
 
   private handleMouseMove(event: MouseEvent): void {
@@ -469,7 +477,7 @@ export class InteractiveBackground implements AfterViewInit, OnDestroy {
   }
 
   private handleMouseUp(): void {
-    this.isPointerDown = false;
+    this.resetPointerInteraction();
   }
 
   private handleTouchStart(event: TouchEvent): void {
@@ -507,11 +515,14 @@ export class InteractiveBackground implements AfterViewInit, OnDestroy {
     }
 
     this.isPointerDown = false;
-    this.activeTouchId = null;
-    this.pointerActive = false;
+    this.resetPointerInteraction();
   }
 
   private handlePointerLeave(): void {
+    this.resetPointerInteraction();
+  }
+
+  private resetPointerInteraction(): void {
     this.pointerActive = false;
     this.isPointerDown = false;
     this.activeTouchId = null;