Koala73/worldmonitor New commit

[gavinlovespython]

Optimize GPU memory usage with will-change CSS property (koala73/worldmonitor#155)

Summary

Optimize GPU memory usage by strategically applying and removing the
will-change CSS property on animated elements. This prevents
unnecessary GPU memory allocation for elements that don't require
continuous optimization, while maintaining smooth animations through the
transition/animation lifecycle.

Type of change

• Refactor / code cleanup
• Performance optimization

Affected areas

• Map / Globe
• Other: UI animations and modals

Changes

CSS Updates (src/styles/main.css)

• Added will-change: transform, opacity; to .panel-header (hover
  state)
• Added will-change: transform, opacity; to .signal-modal (entrance
  animation)
• Added will-change: transform; to .map-popup (slide-in transition)
• Added will-change: transform, opacity; to .mobile-warning-modal
  (entrance animation)
• Added will-change: transform; to .tech-event-marker (transform
  animations)

JavaScript Updates

• MapPopup.ts: Added listener to remove will-change after slide-in
  transition completes
• MobileWarningModal.ts: Added listener to remove will-change
  after entrance animation completes
• SignalModal.ts: Added listener to remove will-change after
  entrance animation completes

Rationale

The will-change property hints to the browser to prepare for
animations, but maintaining it indefinitely wastes GPU memory. By
removing it after animations complete (via transitionend or
animationend events), we free up resources while preserving animation
performance.

Checklist

• TypeScript compiles without errors
• No API keys or secrets committed

https://claude.ai/code/session_01DDhT6Ex596eX1CtSb6mHdH