Vertical Story
Vertical story-style carousel with progress indicators.
Main Features of Vertical Story
How to Use Vertical Story in Next.js
Installation Guide for Vertical Story
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [url1, url2, ...] | Array of image URLs to display in the carousel. |
labels | {title?: string, subtitle?: string}[] | [] | Optional array of labels with title and subtitle for each slide. |
backgroundColor | string | transparent | Background color of the component (hex, rgb, or hsl). |
containerBgColor | string | #000000 | Background color of the carousel container (hex, rgb, or hsl). |
borderRadius | string | 1rem | Border radius of the container (CSS value). |
progressBarBgColor | string | rgba(255,255,255,0.3) | Background color of progress bars (hex, rgb, or hsl). |
progressBarFillColor | string | #ffffff | Fill color of progress bars (hex, rgb, or hsl). |
progressBarHeight | string | 0.25rem | Height of progress bars (CSS value). |
progressBarGap | string | 0.25rem | Gap between progress bars (CSS value). |
titleColor | string | #ffffff | Color of slide titles (hex, rgb, or hsl). |
subtitleColor | string | rgba(255,255,255,0.7) | Color of slide subtitles (hex, rgb, or hsl). |
overlayGradientFrom | string | rgba(0,0,0,0.8) | Start color of the overlay gradient (hex, rgb, or hsl). |
overlayGradientTo | string | transparent | End color of the overlay gradient (hex, rgb, or hsl). |
autoPlayInterval | number | 100 | Auto-play interval in milliseconds. |
progressIncrement | number | 2 | Progress increment per interval (percentage). |
height | string | 24rem | Height of the carousel container (CSS value). |
width | string | 16rem | Width of the carousel container (CSS value). |
Related Components
When to Use
Excellent for street-style blogs, edgy agencies, and Next.js applications that want an energetic 'Story' aesthetic. Use this layout for an engaging experience where content feels 'Mailed' and 'Drafted' by physical film borders.
Best Practices
Follow React best practices by pairing this with bold, professional typography. Maintain consistent spacing within your design system by keeping the progress bars aligned. Optimize for performance by managed the image-scaling intensity.
Why This Component Matters in Modern UI Development
Social-media animations communicate energy, flow, and digital momentum. This production-ready UI template helpsคุณ build an interface that feels alive and energetic, adding a distinct 'Moving' signature to your brand.
Frequently Asked Questions
QHow does progress work?
The component features localized progress-bars spanning the top of the view, allowedคุณ to track the project narrative with high-fidelity visual timing cues.
QCan I adjust timing?
Absolutely, you can adjust both the `autoPlayInterval` and the primary 'backgroundColor' (gradient or solid) to match your brand's specific high-intensity palette.
QIs it mobile responsive?
The vertical flow and typographic scales adapt for mobile, ensuring the bold narrative remains impactful and structural on small screens.