Vertical Scroll Text Reveal
A dense grid of images moves vertically at different speeds to reveal a central text layer.
When to Use
Excellent for hero sections, landing page intros, and cinematic web experiences in Next.js. Use this React component when you want to reveal a 'manifesto' or a central headline by moving a wall of images out of the way vertically.
Best Practices
Maintain consistent spacing within your design system by ensuring the image grid has a balanced density. Follow React best practices by pairing the movement with clear, bold typography. Optimize for performance in large-scale applications by using optimized image formats (WebP/AVIF) for the grid.
Why This Component Matters
Vertical parallax with a central focal point is a powerful storytelling technique in modern frontend development. This production-ready component provides a robust framework for multi-speed reveals, adding visual polish and premium feel to your real-world application architecture.
FAQ
QHow do I change the image grid density?
You can adjust the number of columns and rows in the image grid to make the 'wall' feel more or less dense.
QCan I use different speeds for each column?
Yes, the parallax multiplier can be uniquely set for each column or row to create a more dynamic, 'curtained' reveal effect.
QIs it mobile-responsive?
Absolutely! The image grid and central text adapt to different screen sizes to maintain the reveal's impact on all devices.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.