title: SVG Mask
description: A dynamic SVG mask component that reveals content with hover and mouse movement.
---

```vue
<template>
  <div class="flex h-[40rem] w-full items-center justify-center overflow-hidden">
    <SVGMask class="h-[40rem] rounded-md border">
      <template #base>
        The first rule of <span class="text-red-500">MRR Club</span> is you do not talk about MRR
        Club. The second rule of MRR Club is you DO NOT talk about
        <span class="text-red-500">MRR Club</span>.
      </template>
      <template #reveal>
        <p class="mx-auto max-w-4xl text-center text-4xl font-bold text-slate-800">
          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.
        </p>
      </template>
    </SVGMask>
  </div>
</template>

```

## 通过 CLI 安装

```vue
<InstallationCli component-id="svg-mask" />
```

## 手动安装

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

::code-group

:CodeViewerTab{label="SVGMask.vue" language="vue" componentName="SVGMask" type="ui" id="svg-mask"}

```html [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>
```

::

## API

| 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.

## 感谢

- Ported from [Aceternity UI's SVG Mask Effect](https://ui.aceternity.com/components/text-generate-effect).