Accordion Stack

Accordion Stack is an interactive component, unlike standard accordions that hide inactive items, it keeps every title visible using a layered overlap effect that draws attention to the active section. Items collapse and expand with fluid easing, creating a cinematic scrolling experience.

Whether you're building a portfolio, an agency website, a SaaS landing page, or an editorial layout, this component adds clarity, personality, and motion without sacrificing usability.

What Makes It Stand Out (Features)

• Overlapping title layout with customizable overlap amount

• Smooth expand/collapse transitions with cubic-bezier easing

• Optional serial numbering for each accordion item

• Hover interactions with adjustable color styles

• Control which item is open by default

• Responsive by default — adapts to any layout or width

• Separate styling for active vs inactive states

• Text transform options for both titles and content

Customizations

• Title font, color, active color, hover color, and text transform

• Content font, color, and text transform

• Serial number toggle + individual font styling

• Border color between accordion items

• Enable/disable the overlap effect

• Adjustable overlap distance

• Custom items including title, description, and default open state

Usage

1. Add the Accordion Stack component to your Framer canvas

2. Set the number of items using the Items property

3. Add a Title and Content for each accordion item

4. Toggle the Open property to choose the default opened item

5. Adjust text styles in the Title and Content property groups

6. Enable or disable Serial Numbers and customize their styling if desired

7. Activate or disable the overlap effect and tune the overlap amount

8. Customize default, hover, and active colors for your brand system