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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.