[efegokdemir]

Summary

Fixes #154 and #153 by pausing the decorative ParticleNetwork animation when the hero is outside the viewport and preserving the particle field across height-only resizes.

Changes

• Use IntersectionObserver to start/stop animation based on visibility.
• Listen for runtime prefers-reduced-motion changes.
• Re-seed particles only when the canvas width changes materially; mobile browser-toolbar height changes now rescale without jumping the field.
• Keep resize handling and provide a safe fallback when IntersectionObserver is unavailable.
• Cancel pending frames and disconnect observers/listeners on cleanup.

Testing

• npm run lint — passed.
• npx tsc --noEmit — passed.
• npm test -- --run — 5 files, 20 tests passed.
• npm run build — passed.
• git diff --check — passed.

Notes

The canvas remains decorative and aria-hidden; this change only controls when animation work runs and when the particle field is reseeded.

[netlify]

✅ Deploy Preview for stellartickets ready!

Name	Link
🔨 Latest commit	9343114
🔍 Latest deploy log	https://app.netlify.com/projects/stellartickets/deploys/6ae9349e7ac7c90bf7c66ba4
😎 Deploy Preview	https://deploy-preview-164--stellartickets.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[efegokdemir]

Follow-up also addresses #153 because both issues affect the same resize loop: the particle field is now reseeded only when width changes by more than one pixel. Height-only changes, including mobile URL-bar changes, resize the canvas without resetting particle positions.

Revalidated after the follow-up:

• npm run lint — passed
• npx tsc --noEmit — passed
• npm test -- --run — 5 files, 20 tests passed
• npm run build — passed
• git diff --check — passed