Pause PixelRobots animation when banner lightbox is open

morningD · claude · morningD · commit 04b05b06c918 · 2026-02-21T11:47:36.000+08:00
Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/docs/.vitepress/components/PixelRobots.vue b/docs/.vitepress/components/PixelRobots.vue
@@ -67,6 +67,7 @@ let lastTime = 0
 let resizeObs = null
 let visibilityObs = null
 let isVisible = false
+let lightboxOpen = false
 let sceneReady = false
 let nextSpawn = 0
 let skyFrame = 0
@@ -487,9 +488,13 @@ function startLoop() {
 function stopLoop() {
   if (animFrame) { cancelAnimationFrame(animFrame); animFrame = 0 }
 }
+function onLightboxChange(e) {
+  lightboxOpen = e.detail.open
+  if (!lightboxOpen && isVisible) startLoop()
+}
 function tick(time) {
   animFrame = 0
-  if (!isVisible) return
+  if (!isVisible || lightboxOpen) return
   const dt = lastTime ? Math.min((time - lastTime) / 16, 3) : 1
   lastTime = time
   const w = container.value?.offsetWidth || 800
@@ -921,7 +926,7 @@ function tick(time) {
   if (spores.value.length) triggerRef(spores)
   if (wxParticles.value.length && weather.value.type !== 'clear') triggerRef(wxParticles)
 
-  if (isVisible) animFrame = requestAnimationFrame(tick)
+  if (isVisible && !lightboxOpen) animFrame = requestAnimationFrame(tick)
 }
 
 // ── Drag ──
@@ -992,6 +997,7 @@ onMounted(() => {
     // stopLoop happens naturally: tick() checks isVisible before scheduling next frame
   }, { rootMargin: '100px' }) // start slightly before entering viewport
   if (container.value) visibilityObs.observe(container.value)
+  window.addEventListener('lightbox-change', onLightboxChange)
 })
 onUnmounted(() => {
   if (resizeObs) resizeObs.disconnect()
@@ -1001,6 +1007,7 @@ onUnmounted(() => {
   window.removeEventListener('pointermove', onMove)
   window.removeEventListener('pointerup', onUp)
   window.removeEventListener('resize', onResizeThrottled)
+  window.removeEventListener('lightbox-change', onLightboxChange)
 })
 
 // ── Helpers ──
diff --git a/docs/ar/index.md b/docs/ar/index.md
@@ -101,13 +101,15 @@ function openLightbox(e) {
   if (e.target.closest('a')) return
   lightboxOpen.value = true
   resetTransform()
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: true } }))
 }
 
 function closeLightbox() {
   lightboxOpen.value = false
   pointers.clear()
   pinching = false
   if (rafId) { cancelAnimationFrame(rafId); rafId = 0 }
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: false } }))
 }
 
 function resetTransform() {
diff --git a/docs/es/index.md b/docs/es/index.md
@@ -102,13 +102,15 @@ function openLightbox(e) {
   if (e.target.closest('a')) return
   lightboxOpen.value = true
   resetTransform()
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: true } }))
 }
 
 function closeLightbox() {
   lightboxOpen.value = false
   pointers.clear()
   pinching = false
   if (rafId) { cancelAnimationFrame(rafId); rafId = 0 }
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: false } }))
 }
 
 function resetTransform() {
diff --git a/docs/fr/index.md b/docs/fr/index.md
@@ -102,13 +102,15 @@ function openLightbox(e) {
   if (e.target.closest('a')) return
   lightboxOpen.value = true
   resetTransform()
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: true } }))
 }
 
 function closeLightbox() {
   lightboxOpen.value = false
   pointers.clear()
   pinching = false
   if (rafId) { cancelAnimationFrame(rafId); rafId = 0 }
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: false } }))
 }
 
 function resetTransform() {
diff --git a/docs/index.md b/docs/index.md
@@ -102,13 +102,15 @@ function openLightbox(e) {
   if (e.target.closest('a')) return
   lightboxOpen.value = true
   resetTransform()
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: true } }))
 }
 
 function closeLightbox() {
   lightboxOpen.value = false
   pointers.clear()
   pinching = false
   if (rafId) { cancelAnimationFrame(rafId); rafId = 0 }
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: false } }))
 }
 
 function resetTransform() {
diff --git a/docs/ja/index.md b/docs/ja/index.md
@@ -102,13 +102,15 @@ function openLightbox(e) {
   if (e.target.closest('a')) return
   lightboxOpen.value = true
   resetTransform()
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: true } }))
 }
 
 function closeLightbox() {
   lightboxOpen.value = false
   pointers.clear()
   pinching = false
   if (rafId) { cancelAnimationFrame(rafId); rafId = 0 }
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: false } }))
 }
 
 function resetTransform() {
diff --git a/docs/ko/index.md b/docs/ko/index.md
@@ -102,13 +102,15 @@ function openLightbox(e) {
   if (e.target.closest('a')) return
   lightboxOpen.value = true
   resetTransform()
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: true } }))
 }
 
 function closeLightbox() {
   lightboxOpen.value = false
   pointers.clear()
   pinching = false
   if (rafId) { cancelAnimationFrame(rafId); rafId = 0 }
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: false } }))
 }
 
 function resetTransform() {
diff --git a/docs/ru/index.md b/docs/ru/index.md
@@ -102,13 +102,15 @@ function openLightbox(e) {
   if (e.target.closest('a')) return
   lightboxOpen.value = true
   resetTransform()
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: true } }))
 }
 
 function closeLightbox() {
   lightboxOpen.value = false
   pointers.clear()
   pinching = false
   if (rafId) { cancelAnimationFrame(rafId); rafId = 0 }
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: false } }))
 }
 
 function resetTransform() {
diff --git a/docs/zh-tw/index.md b/docs/zh-tw/index.md
@@ -102,13 +102,15 @@ function openLightbox(e) {
   if (e.target.closest('a')) return
   lightboxOpen.value = true
   resetTransform()
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: true } }))
 }
 
 function closeLightbox() {
   lightboxOpen.value = false
   pointers.clear()
   pinching = false
   if (rafId) { cancelAnimationFrame(rafId); rafId = 0 }
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: false } }))
 }
 
 function resetTransform() {
diff --git a/docs/zh/index.md b/docs/zh/index.md
@@ -102,13 +102,15 @@ function openLightbox(e) {
   if (e.target.closest('a')) return
   lightboxOpen.value = true
   resetTransform()
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: true } }))
 }
 
 function closeLightbox() {
   lightboxOpen.value = false
   pointers.clear()
   pinching = false
   if (rafId) { cancelAnimationFrame(rafId); rafId = 0 }
+  window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: false } }))
 }
 
 function resetTransform() {

Original file line number	Diff line number	Diff line change
`@@ -101,13 +101,15 @@ function openLightbox(e) {`
`101`	`101`	`if (e.target.closest('a')) return`
`102`	`102`	`lightboxOpen.value = true`
`103`	`103`	`resetTransform()`
	`104`	`+ window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: true } }))`
`104`	`105`	`}`
`105`	`106`
`106`	`107`	`function closeLightbox() {`
`107`	`108`	`lightboxOpen.value = false`
`108`	`109`	`pointers.clear()`
`109`	`110`	`pinching = false`
`110`	`111`	`if (rafId) { cancelAnimationFrame(rafId); rafId = 0 }`
	`112`	`+ window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: false } }))`
`111`	`113`	`}`
`112`	`114`
`113`	`115`	`function resetTransform() {`
Original file line number	Diff line number	Diff line change
`@@ -102,13 +102,15 @@ function openLightbox(e) {`
`102`	`102`	`if (e.target.closest('a')) return`
`103`	`103`	`lightboxOpen.value = true`
`104`	`104`	`resetTransform()`
	`105`	`+ window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: true } }))`
`105`	`106`	`}`
`106`	`107`
`107`	`108`	`function closeLightbox() {`
`108`	`109`	`lightboxOpen.value = false`
`109`	`110`	`pointers.clear()`
`110`	`111`	`pinching = false`
`111`	`112`	`if (rafId) { cancelAnimationFrame(rafId); rafId = 0 }`
	`113`	`+ window.dispatchEvent(new CustomEvent('lightbox-change', { detail: { open: false } }))`
`112`	`114`	`}`
`113`	`115`
`114`	`116`	`function resetTransform() {`