Story Mode
Multi-story vertical immersive lightbox with progress bars, tap navigation, and auto-advance.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| stories | Array<{image: string, username: string, timeAgo: string, caption: string}> | [{image: '...', username: 'uilora.studio', timeAgo: '2h ago', caption: 'Golden hour at the Uilora archive...'}] | Array of story objects. Each has image URL, username, timeAgo, and caption. |
| backgroundColor | string | linear-gradient(to top right, #ec4899, #f97316) | Background color or gradient for the avatar row. |
When to Use
Perfect for social-media-style brand presentations and Uilora campaign showcases. Supports 1–N stories with tap zones, chevron arrows, and auto-advance.
Best Practices
Keep 3–6 stories for optimal UX. Use portrait-oriented images (9:16). Stories auto-advance every 5 seconds.
Why This Component Matters
Story-mode interfaces communicate immediacy, energy, and social authenticity. This production-ready Uilora template captures the feel of premium social storytelling.
FAQ
QHow does navigation work?
Tap left third to go back, right third to advance. Chevron arrows appear on desktop. Stories auto-advance after 5 seconds.
QWhat's the progress bar?
Each story has an individual progress bar (3px height). Completed stories show full, current shows live progress, future shows empty.
QIs it mobile responsive?
Uses min(100vw, 390px) × 9:16 aspect ratio — matching standard mobile story dimensions on all screens.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.