canvas-watch

canvas-watch é uma biblioteca agnóstica a frameworks projetada para lidar com detecção de sobreposição 2D entre elementos flutuantes (como barras de navegação fixas ou players encaixados) e zonas de ativação de fundo. Diferentemente do IntersectionObserver, que apenas compara elementos contra seu ancestral de rolagem ou a viewport, o canvas-watch compara retângulos delimitadores para determinar qual zona de fundo um elemento flutuante está atualmente sobreposto. Principais funcionalidades: - Alternância automática de classes: Elementos marcados como "observados" recebem uma classe `over-*` com base na zona de ativação com a qual mais se sobrepõem (limiar padrão de 50%). - Suporte a aninhamento: Zonas de ativação aninhadas têm precedência sobre seus contêineres, permitindo estilização mais específica em layouts complexos. - Rastreamento da viewport: Capacidade de rastrear reativamente se um elemento de referência está acima, dentro, abaixo ou ausente da viewport. - Otimização de desempenho: Utiliza um único loop requestAnimationFrame e IntersectionObserver como porta de visibilidade para garantir que os cálculos de sobreposição só sejam executados para elementos na tela. - Sistema de eventos: Dispara um CustomEvent `canvaschange` sempre que a classe aplicada muda, permitindo lógica além do CSS. A biblioteca fornece um núcleo agnóstico a frameworks e um adaptador dedicado para Svelte. É seguro para SSR e suporta todos os navegadores modernos evergreen.