Masked Typography
Giant text that clips background images and scales as you scroll through.
Main Features of Masked Typography
How to Use Masked Typography in Next.js
Installation Guide for Masked Typography
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 |
Related Components
When to Use
Perfect for bold brand statements, visual storytelling, and Next.js landing pages that want to make an impact. Use this React component for 'giant' typography that acts as a window to your background imagery.
Best Practices
Maintain consistent spacing within your design system by using high-contrast bold fonts. Follow React best practices by setting the `scaleRange` to allow the user to easily scroll 'through' the letters. Optimize for performance by using the `scaleProgressRange` to time the zoom effect perfectly.
Why This Component Matters in Modern UI Development
Masked typography is a powerful tool for visual hierarchy. This production-ready component provides a robust implementation of complex CSS masks and transforms, adding scale and semantic interest to your real-world application architecture.
Frequently Asked Questions
QCan I change the font style?
Yes, the component inherits your global styles, but it is best paired with thick, sans-serif fonts for the best masking effect.
QHow fast should it scale?
The `scaleRange` determines the zoom intensity. A range of [1, 50] creates a fast, cinematic entry into the content.
QDoes it support video backgrounds?
While designed for images, the clipping logic can be easily applied to absolute-positioned video elements.