canvas-watch

canvas-watchは、フレームワークに依存しないライブラリで、フローティング要素（例：固定ナビゲーションバーやドックされたプレイヤー）と背景のトリガーゾーンとの2D重なりを検出します。IntersectionObserverとは異なり、スクロール祖先またはビューポートではなく、バウンディング矩形同士の比較により、フローティング要素が現在どの背景ゾーン上にあるかを判定します。 主な機能: - 自動クラス切り替え: "watched"タグが付いた要素は、最も重なるトリガーゾーンに基づいて`over-*`クラスを受け取ります（デフォルト閾値50%）。 - ネスト対応: 親コンテナよりもネストされたトリガーゾーンが優先され、複雑なレイアウトでのより具体的なスタイリングが可能。 - ビューポート追跡: 参照要素がビューポートの上・内・下・外にあるかをリアクティブに追跡。 - パフォーマンス最適化: 単一のrequestAnimationFrameループとIntersectionObserverによる可視性ゲートを使用し、画面上の要素のみで重なり計算を実行。 - イベントシステム: 適用されるクラスが変更されるたびに`canvaschange`カスタムイベントを発火させ、CSSを超えたロジックを可能に。 このライブラリはフレームワーク非依存のコアと専用のSvelteアダプターを提供し、SSR安全かつすべてのモダンな常時更新ブラウザに対応しています。