About Story Section
MORE FRAMER COMPONENTS LIKE THIS
✦ Browse +38 FREE + 85 premium components: https://frameze.com/components
✦ Carousel Bundle: https://frameze.com/components/category/carousels?ref=bundles
About Story Section
An Instagram-style story carousel with up to 4 image or video slides, auto-advancing progress bars, mute control, swipe and keyboard navigation, customizable thumbnails, captions and a CTA button. Pauses off-screen, fully accessible and editor-safe.
Full-screen hero section that plays like a story. Videos, images, or both.
A full-screen story-style hero player with smooth crossfade transitions, clickable thumbnail navigation, and per-story CTA buttons. Supports video and image sources. Built for brands that move.
Features
Up to 4 stories — mix video and image freely
Smooth crossfade transitions with cinematic gradient overlays
Clickable progress bar — jump to any story instantly
Thumbnail navigation — vertical or horizontal, 4 positions
Per-story CTA button with custom text, link, color, background, font, and radius
Swipe support for mobile (touch gestures)
Keyboard navigation — ← → to switch, Space to pause
Mute / unmute button for video stories
Long-press to pause, release to resume
Auto play and loop controls
Fully customizable progress bar — color, height, gap, padding
Counter display (01 / 04 style)
Responsive — works on mobile, tablet, and desktop
Where to Use
StorySection fits any Framer project where storytelling drives engagement:
Fashion & lifestyle brands — collection launches, lookbook hero sections
Agency portfolios — project showcases, case study openers
E-commerce — product highlight reels, seasonal campaigns
Events & concerts — full-screen atmosphere-building heroes
Travel & hospitality — destination stories, tour highlights
Media & publishing — episode teasers, featured content spotlights
SaaS & app sites — feature demos, onboarding showcases
• Photography & creative portfolios — presenting photo series like film
