What problem does it solve? Vanilla custom elements in Astro pages bundle their JavaScript into the page's entry chunk and run it on load, even for interaction-gated UI like modals, dropdowns, and media players. This bloats the initial JavaScript of public pages, and Astro's client:* directives do not apply to vanilla custom elements. ## Core Features & Use Cases - Code-split hydration: Replaces eager import "./NameElement" with lazyCustomElement(hostSelector, () => import("./NameElement")) from src/lib/lazy-hydrate.ts, splitting the element and heavy dependencies like GSAP or Mux into a separate chunk. - Visibility-based loading: Uses an IntersectionObserver with a 256px rootMargin so the module loads before a tap lands, which is touch-safe unlike hover intent. - View-transition support: Re-observes on astro:page-load so deferred elements keep working across navigations without extra wiring. - Use Case: Defer the @mux/mux-player bundle in SanityMuxVideo.astro so the heaviest media dependency loads only when the video approaches the viewport. ## Quick Start Ask the AI to convert a component's eager custom element import into a lazyCustomElement call in its .astro script so the module loads only when its trigger nears the viewport.
