An interactive carousel with clickable feature chips on one side and matching image cards on the other. Auto-play cycles through features automatically and pauses on hover. Spring physics animations, live badge indicator, and gradient overlays. Built for SaaS product pages, landing pages, and feature showcase sections that need an engaging interactive presentation.
Clickable feature chips navigate to matching image card instantly
Auto-play cycles through features with configurable interval (1000–10000ms)
Pauses auto-play on hover
Spring physics animations on chip and card transitions
Horizontal layout — chips left, cards right
Vertical layout — chips top, cards bottom
Animated live badge with custom text
Optional gradient overlay masks on chip panel top and bottom
8 built-in icon types per chip — leaf, users, globe, check, cloud, phone, dashboard, wand
Full color controls — chip panel, active chip, inactive chip, image border, card background
Full typography controls — chip font, card tag, description and live badge fonts
Configurable chip and card border radius
Configurable image border width
Auto-play disabled in Framer canvas for easy editing
No dependencies
Content
Features — array of feature objects · id, label, icon, image, description per item (3–10 recommended)
Layout
Layout Direction — horizontal or vertical
Item Height — chip height (40–120px)
Auto Play Interval — time between advances (1000–10000ms)
Colors
Left Panel Color · Active Chip Background · Active Chip Text Color
Inactive Chip Text Color · Inactive Chip Border Color
Gradient Color · Right Panel Background · Image Border Color
Typography
Chip Font · Card Tag Font · Card Description Font · Live Badge Font
Appearance
Chip Border Radius (4–100px) · Card Border Radius (0–64px)
Image Border Width (0–20px) · Show Gradient Overlay toggle
Live Badge Text — custom badge label
SaaS product pages · Feature highlight sections · Landing pages · App showcase sections · Product comparison layouts · Onboarding flows · Service presentations · Startup homepages
SEO Keywords
framer feature carousel · framer chip navigation · framer feature tabs · framer product features · framer interactive carousel · framer saas component · framer feature showcase · framer tab carousel · framer feature slider · framer landing page component · framer animated carousel · framer product carousel · framer feature section · framer code component · framer spring animation
An interactive carousel with clickable feature chips on one side and matching image cards on the other. Auto-play cycles through features automatically and pauses on hover. Spring physics animations, live badge indicator, and gradient overlays. Built for SaaS product pages, landing pages, and feature showcase sections that need an engaging interactive presentation.
Clickable feature chips navigate to matching image card instantly
Auto-play cycles through features with configurable interval (1000–10000ms)
Pauses auto-play on hover
Spring physics animations on chip and card transitions
Horizontal layout — chips left, cards right
Vertical layout — chips top, cards bottom
Animated live badge with custom text
Optional gradient overlay masks on chip panel top and bottom
8 built-in icon types per chip — leaf, users, globe, check, cloud, phone, dashboard, wand
Full color controls — chip panel, active chip, inactive chip, image border, card background
Full typography controls — chip font, card tag, description and live badge fonts
Configurable chip and card border radius
Configurable image border width
Auto-play disabled in Framer canvas for easy editing
No dependencies
Content
Features — array of feature objects · id, label, icon, image, description per item (3–10 recommended)
Layout
Layout Direction — horizontal or vertical
Item Height — chip height (40–120px)
Auto Play Interval — time between advances (1000–10000ms)
Colors
Left Panel Color · Active Chip Background · Active Chip Text Color
Inactive Chip Text Color · Inactive Chip Border Color
Gradient Color · Right Panel Background · Image Border Color
Typography
Chip Font · Card Tag Font · Card Description Font · Live Badge Font
Appearance
Chip Border Radius (4–100px) · Card Border Radius (0–64px)
Image Border Width (0–20px) · Show Gradient Overlay toggle
Live Badge Text — custom badge label
SaaS product pages · Feature highlight sections · Landing pages · App showcase sections · Product comparison layouts · Onboarding flows · Service presentations · Startup homepages
SEO Keywords
framer feature carousel · framer chip navigation · framer feature tabs · framer product features · framer interactive carousel · framer saas component · framer feature showcase · framer tab carousel · framer feature slider · framer landing page component · framer animated carousel · framer product carousel · framer feature section · framer code component · framer spring animation
