SlidingHighlightGrid

Sliding Highlight Grid for Framer

A highlight block glides between cards as the user hovers — never disappearing, always transitioning smoothly to the next. Built for editorial, portfolio, and marketing layouts where interaction needs to feel considered. Interaction One highlight element slides to whichever card is active. An animated arrow appears on hover. Both move together in sync. All colors, sizes, and styles are fully configurable from the property panel. Property Controls Layout Columns (1–8), Rows (1–12), Card Height (Fill or Fixed px) Alignment Horizontal (Left / Center / Right), Distribution (Start / Center / End / Space Between / Space Around / Space Evenly), Block Gap Padding Global (all sides) or Custom (Top / Right / Bottom / Left) Colors Background, Highlight Color Border On/Off — Color Arrow On/Off — Background Color, Icon Color Overline On/Off — Font Family, Size, Weight, Line Height, Letter Spacing, Color, Hover Color Title On/Off — Font Family, Size, Weight, Line Height, Letter Spacing, Color, Hover Color Body On/Off — Font Family, Size, Weight, Line Height, Letter Spacing, Color, Hover Color Link Label On/Off — Font Family, Size, Weight, Line Height, Letter Spacing, Color, Hover Color — animated underline on hover Per Card Overline, Title, Body, Link URL, Link Label

Sliding Highlight Grid for Framer