Vert Collection

Overview

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.

Key Features

• 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

Use Cases

• Collection and gallery navigation

• Category or project selectors

• Portfolio and showcase layouts

• Editorial or content-driven pages where visuals change based on selection

Customization

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.

Notes

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.