Uilora Scroll
Scroll-driven image timeline with parallax and progress indicator.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| events | Array<{date, title, description, image}> | 5 Uilora milestones | Timeline events with images. |
| title | string | The Uilora Story | Section heading. |
| subtitle | string | OUR JOURNEY | Tag above heading. |
| accentColor | string | #5227FF | Progress line and dot accent color. |
When to Use
Perfect for company about pages, product histories, and portfolios that want a cinematic scroll-driven timeline with large images.
Best Practices
Use high-quality landscape images. Keep to 4-6 events for smooth scroll performance.
Why This Component Matters
Scroll-driven parallax creates a cinematic storytelling experience that holds attention and makes company history feel engaging.
FAQ
QHow does the progress line work?
It uses framer-motion's useScroll and useTransform to fill a vertical line based on scroll position within the timeline section.
QCan I use custom images?
Yes, each event accepts an image URL. Use high-quality images for the best visual impact.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.