Expanding focus system:Each item expands into a large, dominant view while all other images remain visible as narrow preview slices — creating a continuous, immersive layout.
Always-visible gallery:All images stay on screen at all times. No hard cuts or hidden slides — just a fluid transition between focused states.
Clean, modern design:Rounded cards, controlled spacing, and a minimal structure that fits seamlessly into contemporary layouts.
–––––––––––––––––––––––––––
Scroll & swipe navigation:Navigate through the carousel using scroll (desktop) or swipe (mobile & tablet). Each interaction moves step-by-step between items.
Click-to-focus:Click or tap any preview slice to bring it into focus with a smooth expanding transition.
Direct linking per item:Each slide can include its own link — allowing users to navigate directly to services, case studies, or any external or internal page.
Controlled transitions:No free scrolling — navigation is precise, intentional, and always focused on a single active item.
–––––––––––––––––––––––––––
Fully customizable via the properties panel:
Images (fully replaceable)
Titles & descriptions
Links per slide (internal & external)
Active / inactive sizes
Spacing & border radius
Animation timing
Scroll navigation (enable / disable)
Layout behavior per breakpoint
Desktop:Horizontal expanding carousel with a strong central focus and narrow side previews.
Tablet & Mobile:Vertical layout with stacked items. The active item expands, while others remain as compact preview slices above and below.
True responsive preview:Each breakpoint renders its correct layout directly inside Framer — no mismatched desktop previews on smaller screens.
–––––––––––––––––––––––––––
This component works especially well for:
service navigation sections
portfolio showcases
case study sliders
landing page navigation
brand storytelling sections
Perfect for creating a visually engaging entry point that not only showcases content but also drives users deeper into your site.
–––––––––––––––––––––––––––