Cursor Reveal Mask
NewPro
Two stacked contents: a soft circular mask follows the pointer and reveals the hidden one, such as the wireframe under a finished design.
Customize
130px
0.4
Ring
Idle wander
#ff784f
When to use it
- Design portfolios showing the wireframe under the final screen
- Before and after views of a photo, a restoration or a game's lighting
- Agency or product pages with a hidden message under the headline
Good to know
- Plan
- Pro
- Dependencies
- None beyond React
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 229
Installation
Cursor Reveal Mask is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy cursor-reveal-mask.tsx into components/ui.
Usage
import { CursorRevealMask } from "@/components/ui/cursor-reveal-mask";
<CursorRevealMask radius={130} reveal={<Wireframe />} className="rounded-3xl">
<FinishedDesign />
</CursorRevealMask>Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The content that is visible by default. It sets the size of the area. |
| reveal | ReactNode | — | The hidden content, shown inside the mask. It fills the same area. |
| radius | number | 130 | Radius of the mask, in pixels. |
| softness | number | 0.4 | How soft the edge of the mask is, from 0 (hard) to 1 (all fade). |
| ring | boolean | true | Draw a thin ring around the mask. |
| ringColor | string | "#ff784f" | Color of the ring. |
| idle | boolean | true | Let the mask wander slowly while the pointer is away. |
| label | string | "Reveal area" | Accessible name of the area. Arrow keys move the mask while it has focus. |
| className | string | — | Extra classes for the area. |