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
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | The children of the component. |
| reveal | React.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? | number | 10 | The initial radius of the reveal mask. |
| hoverRadius? | number | 100 | The radius of the reveal mask when the user hovers over the children. |
Use Cases
- Before / After Showcases: Reveal altered, retouched, or wireframe vs. production versions of a visual design.
- Dark & Light Mode Peeks: Interactive hero headers where cursor movement uncovers a dark theme layer underneath.
- Feature Teasers & Easter Eggs: Hide secret codes, discounts, or quirky brand details beneath promotional copy.
- Interactive Product Cutaways: Reveal interior engineering details or technical layers when hovering over product imagery.
