SVG Mask

A dynamic SVG mask component that reveals content with hover and mouse movement.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/svg-mask.json"

Copy and paste the following code in the same folder

SVGMask.vue

mask.svg

Prop Name	Type	Default	Description
`class`	`string`	`""`	Additional CSS classes for custom styling.
`size`	`number`	`10`	Initial size of the mask in pixels.
`revealSize`	`number`	`600`	Size of the mask during hover in pixels.

Hover-Activated Mask: The SVG mask dynamically enlarges when hovered, revealing the content beneath.
Mouse Tracking: The mask follows the cursor, creating an engaging and interactive effect.
Customizable Mask Size: Adjust the initial size (size) and hover size (revealSize) for different effects.
Slot-Based Content: Supports named slots for base and reveal content, making it flexible for various use cases.
Responsive Background: Includes hover-based background color transitions for added visual appeal.

On This Page