Vertical Story
Vertical story-style carousel with auto-advancing progress indicators.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [url1, url2, ...] | Array of image URLs to display. |
| labels | {title?: string, subtitle?: string}[] | [] | Optional labels per slide. |
| autoPlayInterval | number | 100 | Auto-play interval in milliseconds. |
| progressIncrement | number | 2 | Progress increment per interval (percentage). |
| height | string | 24rem | Height of the carousel. |
| width | string | 16rem | Width of the carousel. |
When to Use
Perfect for social-media style story viewers, onboarding flows, and portfolio showcases that benefit from the Instagram story format.
Best Practices
Keep slide count to 4-6 for optimal UX. Use portrait images that fill the card. Ensure text labels are short enough to read before auto-advance.
Why This Component Matters
The story format is one of the most recognizable and engaging UI patterns. It creates urgency and momentum that drives users through content.
FAQ
QHow does the progress bar work?
Each progress bar fills over time using a setInterval. When full, the next slide automatically advances.
QCan I tap to advance?
Yes — clicking either the left or right half of the card advances or goes back, following the Instagram story convention.
QIs it mobile responsive?
Yes — the portrait format is inherently mobile-friendly.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.