Organic Carousel is a responsive Framer component for visual image sliders with a centered active card, organic rounded image shapes, smooth drag navigation, arrow controls, keyboard support, and editable text content.
This component works especially well for:
portfolio sections
fashion showcases
editorial galleries
product storytelling
campaign visuals
photography layouts
landing page highlights
brand presentation modules
image-based case studies
creative project previews
Perfect when you want a carousel that feels softer, more editorial, and more visual than a standard image slider.
–––––––––––––––––––––––––––
Fully customizable via the properties panel:
card images
category text
titles
subtitles
card width
card height
card gap
mobile card width
mobile card height
mobile gap
border radius
active scale
inactive opacity
animation speed
arrow visibility
background color
text color
category font
title font
subtitle font
Built to look polished from the start, but flexible enough to adapt to different visual styles.
–––––––––––––––––––––––––––
Centered active card: The active image always moves into the horizontal center of the component.
Organic image masks: Images use soft pill-shaped / oval masks for a more editorial and premium look.
Visible surrounding cards: Inactive cards stay visible on both sides, creating depth and visual context.
Focused active state: The active card scales up slightly and stays at full opacity while inactive cards fade back.
Clean image-first layout: Minimal text and soft spacing keep the component visually focused and easy to use.
–––––––––––––––––––––––––––
Drag navigation: Users can swipe or drag through the carousel naturally.
Arrow controls: Optional previous / next buttons make navigation simple and direct.
Keyboard support: The carousel can be controlled with the left and right arrow keys.
Click-to-focus behavior: Clicking an inactive card smoothly brings it into the center.
Hover reveal content: Category, title, and subtitle can appear when hovering over a card.
Mobile tap behavior: On mobile, the active card can reveal its content with simple tap interaction.
–––––––––––––––––––––––––––
Desktop: Larger organic cards with strong center focus and visible side items.
Tablet: Card sizes and spacing are automatically reduced for balanced layouts.
Mobile: Smaller cards, tighter gaps, touch-friendly navigation, and tap-based content reveal.
The component is designed to stay clean, usable, and centered across different screen sizes.
–––––––––––––––––––––––––––
moritz strobel
