Smooth Selection is a split-layout component that pairs an interactive item list with a full-height image panel. When users hover over a row, a dark selection bar slides smoothly to that item while the corresponding image crossfades into view with a cinematic Ken Burns zoom effect. Text animates in with a staggered reveal, and metric values count up from zero. Every element is fully editable from the property panel — titles, tags, subtitles, metrics, images, and links are all controlled per item.
Sliding selection bar that smoothly tracks the hovered row with configurable animation speed
Synchronized image crossfade with subtle Ken Burns zoom for a cinematic feel
Staggered text reveal animation on the active row title and subtitle
Animated metric counter that counts up from zero on selection change
Four curated theme presets (Parchment, Midnight, Monochrome, Warm Stone) plus full custom color control
Accent bar indicator on the active row's left edge for a premium visual cue
Optional row index numbers, row dividers, and image gradient overlay
Per-item link support with an animated arrow icon on the active row
Title — main heading for each row
Tag — optional label shown in parentheses
Subtitle — secondary line of text
Metric — large number or text displayed on the right
Metric Label — unit or descriptor after the metric
Image — responsive image with alt text
Link — optional URL, reveals an arrow icon when set
Theme — Parchment, Midnight, Monochrome, Warm Stone, or Custom
Row Dividers — toggle thin separator lines between rows
Row Numbers — display 01, 02... index labels
Accent Bar — colored bar on the left edge of the active row
Animate Metrics — count-up animation on metric values
Image Gradient — gradient fade at the bottom of the image panel
Animation Speed — Fast, Medium, or Slow
Image Fit — Cover or Contain
Image Width — adjustable from 25% to 60%
Border Radius — 0 to 32px
Colors — 8 color controls (visible when Theme is set to Custom): Background, Selection, Text, Text Secondary, Selected Text, Selected Secondary, Dividers, Accent
Typography — independent size controls for Title, Metric, and Subtitle
Font — native font picker
Real estate and property listing showcases
Agency portfolio and case study selectors
Product or service category browsers
Team member or leadership directory displays
Drop it onto your canvas, swap in your content, and ship a selection experience that feels custom-built.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
