Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

SVG Mask Effect

A mask reveal effect, hover the cursor over a container to reveal what's underneath.

Open in
Discover the power of Tailwind CSS v4 with native CSS variables and container queries withadvanced animations.

The first rule of MRR Club is you do not talk about MRR Club. The second rule of MRR Club is you DO NOT talk about MRR Club.

Installation

Run the following command

npx shadcn@latest add @aceternity/svg-mask-effect

Add mask in public folder

public/mask.svg
<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 nameTypeDescription
classNamestringThe class name of the Background Beams component.
childrenstring | ReactNodeThe content of the page that you want to keep static / always on the page
revealTextstring | ReactNodeThe component that is revealed on hover
sizenumbersize of the mask
revealSizenumberHovered 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

Aceternity UI Pro Demo - Light Mode
A product by Aceternity
Building in public at @mannupaaji