This component is an interactive vertical list designed to drive visual context for collections and gallery-style layouts. Each list item responds to hover or focus by smoothly updating the associated image, creating a direct connection between list structure and visual content.
The component is designed to feel expressive while remaining clear and predictable. Its default state is fully visible and complete, allowing users to understand the layout immediately, while motion and hover interactions enhance exploration rather than hiding essential information.
Vertical list layout suited for collections and galleries
Motion-driven image updates based on item focus
Smooth hover and transition animations
Clear active and focus states for intuitive interaction
Clean, minimal structure that highlights visual content
Collection and gallery navigation
Category or project selectors
Portfolio and showcase layouts
Editorial or content-driven pages where visuals change based on selection
All visual and interaction behavior can be customized directly in Framer, including:
List spacing, alignment, and typography
Images and visual content
Motion timing and hover transitions
Active and focus state styling
The component is content-agnostic and works with both placeholder data and dynamic collections.
This component is built as a reusable vertical list for collection-based layouts. Preview content is for demonstration only and can be fully replaced with your own images and data.
Grace Ge
