Masked Reveal
Staggered word reveal with 3D rotation and gradient fade.
Main Features of Masked Reveal
How to Use Masked Reveal in Next.js
Installation Guide for Masked Reveal
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | Orchestrated Chaos | Text to display |
wordGap | string | gap-4 | Gap between words |
fontSize | string | text-6xl md:text-8xl | Font size of the text |
fontWeight | string | font-bold | Font weight of the text |
tracking | string | tracking-tighter | Letter spacing |
textColor | string | text-white | Color of the text |
gradientFrom | string | from-zinc-100 | Gradient start color class |
gradientTo | string | to-zinc-500 | Gradient end color class |
staggerChildrenDelay | number | 0.12 | Delay between children |
childDelayMultiplier | number | 0.04 | Delay multiplier per child |
springDamping | number | 12 | Spring animation damping |
springStiffness | number | 100 | Spring animation stiffness |
initialY | number | 50 | Initial Y position |
initialRotateX | number | -20 | Initial X rotation in degrees |
className | string | Additional CSS classes |
Related Components
When to Use
Perfect for elegant brand introductions, minimalist landing pages, and cinematic web experiences. Use this React component to reveal text with a sophisticated 'curtain' effect that combines 3D rotation and gradient fading.
Best Practices
Optimize for legibility by ensures the `initialRotateX` isn't too extreme. Follow React best practices by using a standard `staggerChildrenDelay` (e.g., 0.1s) for a natural reveal rhythm. Maintain scalable component architecture by using responsive font sizes that work across mobile and desktop.
Why This Component Matters in Modern UI Development
Orchestrated reveals are a staple of premium modern UI development. This production-ready component provides a robust implementation of complex staggered motion, adding a layer of polish and semantic interest to your real-world application architecture.
Frequently Asked Questions
QCan I reveal character by character?
The current implementation is word-based for best narrative flow, but the logic can be easily updated to target individual characters.
QDoes it support custom fonts?
Yes, it fully supports all global typography styles and works beautifully with high-contrast serif or sans-serif fonts.
QIs the 3D rotation mandatory?
No, you can set the `initialRotateX` to 0 for a simple, elegant vertical slide reveal.