Media Interaction
Choose by intent: Morph Lightbox for a gallery destination, Expandable Media for one inline article object, Hover Video Scrubber for rapid clip inspection, Image Sequence for explicit frames, Lens Cursor for local magnification, and Floating Media Player for persistent playback layout.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Media Interaction · selection stays explicit
Purpose
Choose by intent: Morph Lightbox for a gallery destination, Expandable Media for one inline article object, Hover Video Scrubber for rapid clip inspection, Image Sequence for explicit frames, Lens Cursor for local magnification, and Floating Media Player for persistent playback layout.
Use one primary media interaction per region. Do not stack lens, scrubber, morph and autoplay on the same asset. Posters, alt text, captions, explicit controls and keyboard paths precede choreography.
Lazy-load assets, preload conservatively, pause offscreen playback and simplify touch behaviour honestly. Media motion must make inspection easier, never increase download cost merely to decorate a page.
Source: packages/skills/patterns/media-interaction.md