Animations & Motion
Masked Typography
Giant text that clips background images and scales as you scroll through.
parallaxtypographymaskscroll
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [] | Array of image URLs |
backgroundColor | string | bg-white | Background color of the component |
containerHeight | string | h-[300vh] | Height of the container |
gridCols | number | 3 | Number of grid columns |
gridRows | number | 3 | Number of grid rows |
text | string | VISION | Text displayed |
textColor | string | text-white | Color of the text |
textSize | string | text-[20vw] | Size of the text |
overlayColor | string | bg-blue-900/40 | Color of overlay |
overlayOpacity | number | 0.4 | Opacity of overlay |
scaleRange | [number, number] | [1, 50] | Scale range |
scaleProgressRange | [number, number] | [0, 0.8] | Scale progress range |
opacityRange | [number, number] | [1, 0] | Opacity range |
opacityProgressRange | [number, number] | [0.7, 0.8] | Opacity progress range |
bgYRange | [number, number] | [0, 200] | Background Y position range |
transitionText | string | Transition Complete | Transition text displayed |
transitionTextColor | string | text-white | Color of transition text |
transitionTextSize | string | text-2xl | Size of transition text |
transitionOpacityRange | [number, number] | [0.75, 0.9] | Transition opacity range |
className | string | Additional CSS classes |