From 834d884e07bfe4e8328d4f63c4ae0bc414b3bfca Mon Sep 17 00:00:00 2001
From: Tim Kainz <tikaiz@gmx.at>
Date: Thu, 16 Apr 2026 22:26:56 +0200
Subject: [PATCH] make background less distracting on mobile

---
 .../interactive-background/interactive-background.ts         | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/interactive-background/interactive-background.ts b/src/components/interactive-background/interactive-background.ts
index d02c93e..0d9b199 100644
--- a/src/components/interactive-background/interactive-background.ts
+++ b/src/components/interactive-background/interactive-background.ts
@@ -288,6 +288,7 @@ export class InteractiveBackground implements AfterViewInit, OnDestroy {
   private pointerActive = false;
   private activeTouchId: number | null = null;
   private reducedMotion = false;
+  private lowMotionMobile = false;
   private mediaQuery!: MediaQueryList;
   private readonly pointerExcludeSelector = '[data-disable-bg-pointer]';
 
@@ -296,12 +297,14 @@ export class InteractiveBackground implements AfterViewInit, OnDestroy {
     const context = canvas.getContext('2d');
 
     this.mediaQuery = this.getMediaQuery('(prefers-reduced-motion: reduce)');
+    this.lowMotionMobile = this.getMediaQuery('(max-width: 760px), (pointer: coarse) and (hover: none)').matches;
     this.reducedMotion = this.mediaQuery.matches;
 
     if (context) {
       const area = window.innerWidth * window.innerHeight;
       const dynamicCount = Math.round(Math.min(170, Math.max(80, area / 14500)));
-      const particleCount = this.reducedMotion ? 42 : dynamicCount;
+      const mobileCount = Math.round(Math.min(54, Math.max(28, dynamicCount * 0.4)));
+      const particleCount = this.reducedMotion ? 42 : (this.lowMotionMobile ? mobileCount : dynamicCount);
       this.particleEngine = new ParticleEngine(context, particleCount);
       this.resizeCanvas();
       this.renderInitialFrame();