canvas-watch

canvas-watch is a framework-agnostic library designed to handle 2D overlap detection between floating elements (like sticky nav bars or docked players) and background trigger zones. Unlike IntersectionObserver, which only compares elements against their scroll-ancestor or the viewport, canvas-watch compares bounding rectangles to determine which background zone a floating element is currently sitting over. Key capabilities include: - Automatic class toggling: Elements tagged as "watched" receive an `over-*` class based on the trigger zone they overlap most (default threshold 50%). - Nesting support: Nested trigger zones take precedence over their containers, allowing for more specific styling in complex layouts. - Viewport tracking: Ability to reactively track whether a reference element is above, within, below, or missing from the viewport. - Performance optimization: Uses a single requestAnimationFrame loop and IntersectionObserver as a visibility gate to ensure overlap math only runs for on-screen elements. - Event system: Dispatches a `canvaschange` CustomEvent whenever the applied class changes, enabling logic beyond CSS. The library provides a framework-agnostic core and a dedicated Svelte adapter. It is SSR-safe and supports all modern evergreen browsers.