SVG Mask

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

通过 CLI 安装

npm

pnpm

bun

yarn

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

在同一个文件中，复制并粘贴以下代码：

SVGMask.vue

mask.svg

Prop 名称	类型	默认值	描述
`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.

本页