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