Text Clip Mask
This Demo Requires Full window for better accuracy and performance. Click the button below to open a Good Preview.
Installation
Install Dependencies
Copy and Paste the component
@/components/reframe-ui/text-clip-mask.tsx
Usage
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| text | string | - | Yes | The text to convert into an SVG mask. |
| fontUrl | string | - | No | The font to use |
| fontSize | number | - | No | The size of the text |
| scrollContainer | HTMLElement | null | - | No | The scroll container to use for sticky section |
| stickyVh | number | 300 | No | The height of the sticky section |
| initialMaskScale | number | 0.8 | No | The initial scale of the mask |
| targetMaskScale | number | 30 | No | The target scale of the mask |
| easing | number | 0.15 | No | The easing factor for the smoothed progress |
| className | string | - | No | Optional: className for the root element |
| maskPosition | string | 50% 50% | No | The position of the mask |
| children | React.ReactNode | - | Yes | The content to be masked |
© Copyright 2025. All rights reserved.Built by @thommysart