FeatureCarousel

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.

Features

• 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

Property Controls

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

Use Cases

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