Uilora Reveal Banner
Scroll-driven banner that scales a masked image, splits intro text, and reveals a title word-by-word using GSAP ScrollTrigger.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| bannerTitle | string | I will find you... | Title text revealed word-by-word during scroll |
| introLeft | string | Design | Left side intro text that slides out |
| introRight | string | System | Right side intro text that slides out |
| imageUrl | string | https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop | Background image URL |
| maskUrl | string | https://cdn.prod.website-files.com/... | PNG mask URL for the masked image layer |
When to Use
Perfect for cinematic brand intros, high-end landing pages, and editorial hero sections. Use this React component when you want a dramatic entrance that combines image scaling, text splitting, and a CSS mask reveal all driven by scroll progress.
Best Practices
Use a high-contrast mask PNG with transparency for the best reveal effect. Keep `bannerTitle` to 3–6 words for optimal word-by-word reveal pacing. Ensure GSAP and ScrollTrigger are installed.
Why This Component Matters
Combining scroll-pinned scaling with mask transitions and staggered word reveals is a top-tier modern UI technique. This component bundles all three into a single scroll-driven experience.
FAQ
QWhat format should the mask be?
Use a high-resolution PNG with a transparent background. The mask shape defines what area of the image shows through the masked layer.
QCan I change the scroll length?
Yes — the `end: '+=400%'` in the ScrollTrigger config controls how long the animation takes. Increase it for a slower, more cinematic reveal.
QDoes it support custom fonts?
Yes, the component uses Tailwind classes for typography, so swapping font families is a single class change.
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.