Uilora Dragon Scroll
Full-screen scroll-snapping narrative with pinned hero, item reveals, and cinematic outro.
When to Use
Ideal for cinematic storytelling, product showcases, and immersive brand narratives. Use this React component when you want a full-screen scroll journey with pinned sections and dramatic item reveals.
Best Practices
Use 3–6 items for the best narrative pacing. Pair with full-bleed, high-quality images that complement the dark cinematic aesthetic.
Why This Component Matters
Scroll-snapping with pinned narrative sections creates a guided, movie-like user experience that keeps visitors engaged and drives them through a brand story.
FAQ
QCan I add more items?
Yes, simply extend the items array passed to the component.
QIs it mobile-friendly?
Yes, the layout adapts to smaller screens while maintaining the scroll narrative experience.
QDoes it use GSAP ScrollTrigger?
Yes, the pinning and reveal animations are driven by GSAP ScrollTrigger for precise scroll-mapped control.
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.