Story Mode
Vertical immersive story mode lightbox.
Main Features of Story Mode
How to Use Story Mode in Next.js
Installation Guide for Story Mode
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
image | string | https://images.unsplash.com/photo-1516483638261-f4dbaf036963?q=80&w=2000&auto=format&fit=crop | Main image source URL. |
thumbnailImage | string | Optional thumbnail image URL (uses main image if not provided). | |
backgroundColor | string | linear-gradient(to top right, #ec4899, #f97316) | Background color or gradient (hex, rgb, hsl, or CSS gradient). |
username | string | alex_travels | Username text. |
timeAgo | string | 2h ago | Time ago text. |
caption | string | Just arrived in paradise. The colors here are unreal! 🌴✨ | Caption text. |
progressDuration | number | 5000 | Progress bar duration in milliseconds. |
Related Components
When to Use
Perfect for street-style blogs, edgy agencies, and Next.js applications that want an energetic 'Story Mode' aesthetic. Use this lightbox 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, allowing users to track the project narrative with high-fidelity visual timing cues.
QCan I adjust timing?
Absolutely, you can adjust both the `progressDuration` 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.