SVG Mask Effect
Mouse-following SVG mask that reveals hidden content as the cursor moves over an area.
Preview
SVG Mask Effect
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Interactive storytelling sections and reveal-on-hover content.
Why this component matters
Context over decoration. The mask reveals a second layer of information, adding depth to a single viewport.
Usage guidance
Place meaningful content in the hidden layer — not just a color swap. Use it to reveal pricing, additional details, or alternate views.
Installation
bash
npx shadcn@latest add @aceternity/svg-mask-effectUsage
example.tsxtsx
import { SVGMaskEffect } from "@/components/ui/svg-mask-effect";
export default function Example() {
return (
<SVGMaskEffect>
{/* Your content here */}
</SVGMaskEffect>
);
}Source
svg-mask-effect.tsx
components/ui/svg-mask-effect.tsx