Back to Components
PreviousNext

Reveal Mask

A cursor-driven mask that reveals a hidden layer of content when the user hovers over the visible layer.

I'm a selectively skilled creative designer with strong focus on producing high quality & impactful digital experiences.

I create stunning digital experiences that leave a lasting impression. My focus is on quality, impact, and making sure the final product is nothing short of exceptional.

Installation

$ npx shadcn@latest add https://akshitr.com/r/reveal-mask.json

Usage

import RevealMask from "@/components/reveal-mask";
 
export default function RevealMaskDemo() {
  return (
    <RevealMask
      radius={8}
      hoverRadius={120}
      children={
        <h1 className="text-5xl font-medium text-zinc-500">
          Design is Awesome.
        </h1>
      }
      reveal={
        <div className="flex h-full w-full items-center justify-center bg-zinc-900">
          <h1 className="text-5xl font-medium text-zinc-100">
            Design is Cool.
          </h1>
        </div>
      }
    />
  );
}

Component API

ProgressiveBlur

PropTypeDefaultDescription
childrenReact.ReactNode—The children of the component.
revealReact.ReactNode—The content that will be revealed when the user hovers over the children.
className?string—Additional classes applied to the root element.
revealClassName?string—Additional classes applied to the reveal element.
radius?number10The initial radius of the reveal mask.
hoverRadius?number100The radius of the reveal mask when the user hovers over the children.