Is Mask Reveal Image free for commercial use?

Yes. Mask Reveal Image is MIT licensed, so you can use it in personal and commercial projects without attribution.

Is the image reveal accessible and performance conscious?

Yes. It renders a native img with the supplied alt text and intrinsic dimensions, never hides that image from assistive technology, and plays its reveal once, with nothing left running afterwards. The bounded wrapper animates clip-path while the image animates transform, then both return to their authored final styles.

How do I change the direction and shape of the reveal?

Set direction to up or left to choose the moving curtain edge. Use className to apply your preferred radius or border to the clipping wrapper while the source width and height preserve the correct image proportions.

Mask Reveal Image

A free image reveal animation for React with a scroll-triggered curtain wipe.

The Fellcast summit forecast for Helvellyn above a dusk ridgeline: freezing level 620 metres, gusts of 54 mph and a cloud base of 780 metres

Customise

Reveal direction

Code

<MediaMaskReveal src="/summit-forecast.png" alt="Helvellyn summit forecast" width={1600} height={1000} />

Mask Reveal Image is a free image reveal animation for React and Next.js, styled with Tailwind, that wipes a bounded curtain away as the image settles from a gentle scale. Choose an upward or leftward reveal while explicit intrinsic dimensions reserve the complete media frame before animation begins.

The reveal plays once, when the top of the image reaches 80 percent of the viewport height, and is built with Motion. The image remains a plain accessible img throughout, reduced-motion and no-JavaScript visitors receive the authored final state immediately, and nothing keeps running after the reveal or across route changes.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/media-mask-reveal

Usage

import { MediaMaskReveal } from "@/components/media-mask-reveal";

export function Example() {
  return (
    <MediaMaskReveal
      src="/product-dashboard.jpg"
      alt="Analytics dashboard showing weekly growth"
      width={1600}
      height={1000}
      direction="up"
      className="rounded-3xl"
    />
  );
}

Props

Prop	Type	Default	Description
src	string	required	Image source passed directly to the native img element.
alt	string	required	Meaningful alternative text, or an empty string when the image is decorative.
width	number	required	Positive intrinsic image width used with height to reserve layout space.
height	number	required	Positive intrinsic image height used with width to reserve layout space.
direction	"up" \| "left"	"up"	Direction travelled by the reveal edge. Up first exposes the bottom edge; left first exposes the right edge.
className	string	undefined	Additional classes merged onto the media wrapper.

Customisation

Mask Reveal Image adds no colour tokens because it never paints over the supplied media. Use direction to change the curtain geometry, choose width and height that match the source asset, and use className for a semantic border, radius or surface treatment.

<MediaMaskReveal
  src="/case-study.jpg"
  alt="New mobile checkout flow"
  width={1440}
  height={900}
  direction="left"
  className="rounded-2xl border border-border"
/>

Frequently asked questions

Is Mask Reveal Image free for commercial use?: Yes. Mask Reveal Image is MIT licensed, so you can use it in personal and commercial projects without attribution.
Is the image reveal accessible and performance conscious?: Yes. It renders a native img with the supplied alt text and intrinsic dimensions, never hides that image from assistive technology, and plays its reveal once, with nothing left running afterwards. The bounded wrapper animates clip-path while the image animates transform, then both return to their authored final styles.
How do I change the direction and shape of the reveal?: Set direction to up or left to choose the moving curtain edge. Use className to apply your preferred radius or border to the clipping wrapper while the source width and height preserve the correct image proportions.

Related components

Want the full page this belongs to?Template Empire builds complete Next.js templates with polished product storytelling and this motion system throughout.Explore Template Empire templates