SVG Mask
A dynamic SVG mask component that reveals content with hover and mouse movement.
API
| 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. |
Component Code
You can copy and paste the following code to create this component:
Features
- 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.
Credits
- Ported from Aceternity UI's SVG Mask Effect.