Skip to content
Pinky UI

motion

Mask Reveal

A directional clipping reveal.

  • motion
Related pattern

Canonical clipping reveal for editorial and media surfaces.

Live preview

Quick usage

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

<MaskReveal />

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

MaskReveal reveals a heading, image or editorial surface through a directional clipping mask. It is best when the boundary of the content is part of the composition.

Use one direction and a restrained duration for a hero image or section transition. Do not mask long paragraphs, interactive controls, or many nested children; clipping can make content feel unavailable and can complicate layout.

Keep the final content in the DOM and remove the mask animation for reduced motion. Verify that focusable descendants are not clipped while focused and that the static layout still reads in the source order.

Open this skill on its own page