Text Clip Mask

PRO

Preview live, install via shadcn or copy the source.

Installation

Install via shadcn

This will install the component and its dependencies automatically.

PRO COMPONENT

Unlock with PRO

This component is exclusive to reframe/ui PRO.
Get instant access to all premium components and templates.

Usage

text-clip-mask-usage.tsxTSX

Props

NameTypeDefaultRequiredDescription
textstringYesThe text to convert into an SVG mask.
fontUrlstringNoThe font to use
fontSizenumberNoThe size of the text
scrollContainerHTMLElement | nullNoThe scroll container to use for sticky section
stickyVhnumber300NoThe height of the sticky section
initialMaskScalenumber0.8NoThe initial scale of the mask
targetMaskScalenumber30NoThe target scale of the mask
easingnumber0.15NoThe easing factor for the smoothed progress
classNamestringNoOptional: className for the root element
maskPositionstring50% 50%NoThe position of the mask
childrenReact.ReactNodeYesThe content to be masked
© reframe/ui 2026Built by @thommysart
More in Scroll Effects