SVG Mask Effect
A mask reveal effect, hover the cursor over a container to reveal what's underneath.
Installation
Run the following command
npx shadcn@latest add @aceternity/svg-mask-effect
Add mask in public folder
<svg
width="1298"
height="1298"
viewBox="0 0 1298 1298"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="649" cy="649" r="649" fill="black" />
</svg>
Props
Prop name | Type | Description |
---|---|---|
className | string | The class name of the Background Beams component. |
children | string | ReactNode | The content of the page that you want to keep static / always on the page |
revealText | string | ReactNode | The component that is revealed on hover |
size | number | size of the mask |
revealSize | number | Hovered over size of the mask |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time

