API Hooks Demo

Demonstrates on event callbacks for state changes and loading lifecycle

State Change Hooks

onImageHover, onImageUnhover, onImageFocus, onImageUnfocus — logged in real time. Click an image to focus it.

Loading Lifecycle Hooks

onImageLoaded, onImageError, onLoadProgress, onGalleryReady — progress bar driven by onLoadProgress.

Entry Animation Hooks

onEntryStart, onEntryProgress (per-rAF, JS paths only), onEntryComplete. Using a bounce path so onEntryProgress fires.

onLayoutComplete

Fires after positions are computed, before images load. Log shows algorithm + bounding box of the layout.

onBeforeImageLoad — URL Transform

Each image URL is rewritten to request a grayscale version via a query param. Uses Mode A (URL-only, zero fetch overhead).