Build a premium, highly engaging visual experience with a fluid hover-expand accordion. Perfectly handles images, auto-playing videos, and custom typography to showcase your best content with smooth, eye-catching motion.
Features
Fluid hover-triggered expansion and collapse
Seamless image and 4K video media support
Smart auto-play and pause logic for hovered videos
Dark gradient overlay for optimal text legibility
Smooth, premium motion physics and easing
Global typography control for seamless branding
Custom animated tags, titles, descriptions, and CTA buttons
Highly optimized for responsive Framer layouts
Zero-code setup with dynamic property controls
Clean visual architecture for premium UI
Customization Options
Media type (Image or MP4/WebM Video)
Global typography styling (Font, Size, Weight)
Accordion gap and layout spacing
Corner radius and clipping
Expanded and collapsed flex sizing ratios
Animation transition speed and smoothness
Panel titles and multi-line descriptions
Custom top-right tag labels and CTA text
How to Use
Drop the component onto your Framer canvas
Add or remove panels via the property controls on the right
Upload high-quality images or immersive video files
Tweak the transition speed and flex sizes to fit your layout
Adjust the typography to perfectly match your brand guidelines
Publish to deliver a highly interactive, premium showcase
Use Cases
Interactive portfolio galleries
Modern SaaS feature highlights
Creative agency showcases
Video product demonstrations
Dynamic landing page sections
Premium real estate listings
Cinematic photography sliders
High-converting media blocks
Interactive case study menus
Engaging e-commerce displays
