fix(hero) : WebGL animation lifecycle logic

[ShubhamOulkar]

This PR refactors the WebGL background animation lifecycle in the Hero component. Previously, multiple independent event listeners (IntersectionObserver, visibilitychange, and motionQuery) could send conflicting play() and pause() commands to the WebGL controller.

The primary issue fixed: If a user scrolled down (triggering a pause via IntersectionObserver) and then switched tabs and returned, the visibilitychange listener would blindly trigger play(), causing the animation to run at 60fps while completely off-screen.

How to Test?

Included temporary console.log statements in the sync() function to make verification easy.

// Add this inside the sync() function in Hero.astro for testing:
console.log(`[Hero BG] ${shouldAnimate ? '▶️ PLAY' : '⏸️ PAUSE'}`, {
  isIntersecting,
  isTabVisible: !document.hidden,
  isMobile: isMobile.matches,
  reducedMotion: motionQuery.matches
});

Adaptive Performance 64628ba:

By using the isMobile listener, the UI dynamically adapts to the current browser environment. If a user on a laptop enters a split-screen or small-window view, the system automatically shuts down the WebGL loop to prioritize the readability of the documentation.

Improved page reload blank background

Express.js.Node.js.web.application.framework.mp4

[netlify]

✅ Deploy Preview for expressjscom-preview ready!

Name	Link
🔨 Latest commit	85b7d2c
🔍 Latest deploy log	https://app.netlify.com/projects/expressjscom-preview/deploys/69e5b6214602da00086a9070
😎 Deploy Preview	https://deploy-preview-2286--expressjscom-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 99 (🟢 up 3 from production) Accessibility: 100 (🟢 up 13 from production) Best Practices: 100 (no change from production) SEO: 100 (🟢 up 6 from production) PWA: 80 (🟢 up 50 from production) View the detailed breakdown and full score reports

---

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