Arc Focus Carousel: Premium Carousels Component by moritz strobel

A designer-made arc carousel that brings one item into focus while surrounding images stay visible along a smooth curved path. Built for modern Framer projects, responsive behavior, and flexible content, styling, and interaction controls.

About this Component

Visual & layout

Arc-based layout: Images are arranged along a curved path, creating a more dynamic and editorial look than a standard slider.

Focused active state: One item always moves into the visual center, scales up, and lifts forward while surrounding cards stay visible with reduced size and opacity.

Clean, modern design: Rounded cards, subtle shadows, balanced spacing, and a minimal content area keep the component polished and premium.

–––––––––––––––––––––––––––

Interaction

Drag, scroll & tap navigation: Rotate through items with drag, wheel scroll, arrow controls, or direct click / tap interaction.

Click-to-focus behavior: Any image can be selected and smoothly animated into the active focal position.

Direct linking per item: Each card supports its own CTA label and link, making it easy to connect slides to projects, services, case studies, or external pages.

Controlled motion system: Motion is smooth and intentional, with spring-based transitions that keep navigation precise and visually refined.

–––––––––––––––––––––––––––

Customization

Fully customizable via the properties panel:

images per item
titles, subheadlines, and CTA labels
individual links per slide
title, subheadline, and button styling
background and color settings
border radius and card shadow
active / inactive scale and opacity
lift, spacing, and arc positioning
drag and wheel sensitivity
spring animation timing
square or portrait image ratio
scroll on / off

Built by designers: This module was developed with real visual design use cases in mind — not just technically functional, but tuned to feel clean, balanced, and presentation-ready inside modern Framer sites.

–––––––––––––––––––––––––––

Responsive behavior

Desktop: Wide curved carousel with a strong focal image, supporting surrounding previews and centered content below.

Tablet: The arc adapts automatically for smaller widths, keeping the carousel readable and visually balanced.

Mobile: Card sizing, arc spread, and spacing scale down responsively so the interaction still feels clean and intentional on smaller screens.

True responsive behavior: The component adjusts its layout logic based on screen width, so the carousel keeps its visual clarity across desktop, tablet, and mobile.