Image Reveal
`ImageReveal` is the media-specific preset of `MaskReveal`, combining a restrained mask, scale and blur for image-led entrances. It is a useful choice for a gallery, project cover or editorial media block; use `MaskReveal` for non-image surfaces.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Purpose
ImageReveal is the media-specific preset of MaskReveal, combining a restrained mask, scale and blur for image-led entrances. It is a useful choice for a gallery, project cover or editorial media block; use MaskReveal for non-image surfaces.
Use a small scale difference (about 1.02–1.08), low blur and one overlay sweep. Do not hide a critical image indefinitely, stack it with several other reveals, or use it for tiny icons.
Provide a real alt when the image conveys information; use empty alt only for decorative media. Reduced motion displays the image directly and the overlay disappears. Keep dimensions reserved to prevent layout shift.
Source: packages/skills/motion/image-reveal.md