---
title: "Eclipse AccordionPro — Free Framer component · Best of Framer"
description: "Free Framer component · by Kateryna Dei · Accordions. Cinematic accordion carousel."
canonical: "https://framer.elliotli.dev/component/eclipse-accordionpro"
---

[Home](/)/[Components](/components)/[Accordions](/components/category/accordions)/Eclipse AccordionPro

# Eclipse AccordionPro

Cinematic accordion carousel.

[View on Framer](https://framer.com/marketplace/components/eclipse-accordionpro/?via=elliot-li)

![Eclipse AccordionPro preview image 1](https://framer.elliotli.dev/og/component/eclipse-accordionpro/d7a029a9740d48d6/1600x1149.jpg)

## Summary

Cinematic accordion carousel.

## Description

**_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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1875

## Details

- **Author**: Kateryna Dei
- **Published**: 2026-08-15
- **Updated**: 2026-08-15
- **Added**: 2026-08-15
- **Categories**: Accordions

## More like this

-   [Fold Rows](/component/fold-rows) — H SHIFT WORKS · Free — Accordion for FAQs and services
-   [FaqX Faq Accordion](/component/faqx-faq-accordion) — Themomarket · $8 — Accordion FAQ Section
-   [FAQ - Minimal](/component/faq-minimal) — VectorFlow Studio · $3 — Interactive dark mode FAQ stack
-   [FAQ Accordion Search](/component/faq-accordion-search) — Russet Supply · $5 — Searchable FAQ accordion with categories