Horizontal Scroll Text Reveal
Two rows of images split vertically to reveal core text content with horizontal parallax.
When to Use
Perfect for fashion magazines, high-end landing pages, and cinematic brand intros in Next.js. Use this React component to reveal a center-stage message by sliding two horizontal image galleries in opposite directions.
Best Practices
Maintain scalable component architecture by using images that have a similar color palette to ensure the central text remains legible. Follow React best practices by setting the horizontal shift amount based on the viewport width. Optimize for performance by using efficient transforms for the image rows.
Why This Component Matters
Horizontal parallax combined with vertical reveals is a staple of 'award-winning' modern UI development. This production-ready component provides a robust framework for complex multi-axis motion, adding semantic authority and visual excitement to your real-world application architecture.
FAQ
QCan the image rows move at different speeds?
Yes, the parallax multiplier can be customized for each row to create a more complex sense of depth.
QWhat should the aspect ratio of the images be?
Portait or square images work best for creating a dense, textured background grid that splits apart.
QIs it responsive?
Yes, the horizontal shift and central text scale appropriately to ensure a high-impact experience on mobile 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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.