Skip to content
Pinky UI

motion

Image Reveal

A media-specific mask, scale and focus preset of Mask Reveal.

  • motion
Variation of

Use for supplied media; choose Mask Reveal when the child surface is not specifically an image. Open Mask Reveal

Live preview

Quick usage

usage
import { ImageReveal } from "@pinky-ui/effects";

<ImageReveal />

Install

Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/effects

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Motion never carries the only meaning; the underlying content remains in the DOM.
  • Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.

Reduced motion

The effect resolves to a static readable state when motion is reduced.

When to use

  • As a restrained enhancement to meaningful content.

When not to use

  • When the content or control would be unclear without motion.

Skill

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.

Open this skill on its own page