Eclipse AccordionPro

Cinematic accordion carousel.

Eclipse Accordion is a premium, highly responsive accordion carousel for Framer designed to turn static card layouts into interactive, cinematic motion experiences. 🎬✨

Bring your landing pages, portfolio showcases, and product features to life with ultra-smooth hover and click expansions powered by Framer Motion! 🚀

🔥 Key Features:

• ⚡ Ultra-Smooth Dynamic Expansion: Fluid, spring-animated card resizing (flex expansion) that reacts instantly to user interaction.

• 🎨 Multi-Media Support: Seamlessly mix and match Solid Colors, High-Res Images, and Autoplay Videos (.mp4, .webm) within a single slider.

• 🎯 Perfect Canvas Preview (Static Renderer Fix): Built-in useIsStaticRenderer integration ensures smooth canvas performance and prevents heavy video playback lag inside the Framer editor.

• ⏱ Custom Speed Control: Fine-tune transition durations from quick snaps to slow, cinematic flows (0.1s – 3.0s).

• 🔤 Rich Typography Controls: Full control over title and description fonts, sizes, colors, and line-heights directly from the Framer sidebar.

• 🎛 Fully Customizable Layout:

  • Adjustable Card Radius (from sharp 0px to fully rounded 100px).

  • Custom Gaps, Padding, and Container Height.

  • Dynamic Opacity and sleek dark gradient overlays for text contrast.

• 🔘 Responsive Navigation Indicators: Interactive pill-style progress dots with custom active/inactive colors and animated sizes.

• 📱 100% Mobile & Touch Friendly: Optimized for responsiveness across desktop, tablet, and mobile breakpoints.

💡 Ideal For:

• 🌟 Portfolios & Case Studies

• 🛍 E-commerce Product Highlights

• 🎬 Video & Motion Design Showcases

• 🏔 Interactive Travel & Adventure Tour Cards