Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | AccordionItem[] | [{id, label, title, description, image}, ...] | Array of items — each panel can have a label, title, description, and background image URL. |
| height | string | "20rem" | Height of the accordion container. |
| labelColor | string | "#ffffff" | Color of the vertical label text on each collapsed panel. |
| titleColor | string | "#ffffff" | Color of the title shown in the expanded panel. |
| descriptionColor | string | "#d4d4d8" | Color of the description text in the expanded panel. |
| defaultActive | number | null | null | Index of the initially expanded panel. |
When to Use
Ideal for editorial showcases, portfolio galleries, and product feature sections where visual storytelling is the priority. The horizontal split creates instant hierarchy.
Best Practices
Use 3–4 panels for best visual balance. Landscape images with a clear subject work best since the panel crops to portrait on collapse. Keep labels 1–2 words.
Why This Component Matters
Horizontal expanding panels are one of the most visually impactful UI patterns — they turn a static image grid into an interactive narrative. Motion and content reveal together.
FAQ
QCan I use a color instead of an image?
Yes — omit the image prop on any item and set the item's background via the backgroundImage style on the motion.div.
QHow do I adjust the expand ratio?
Change flex-[4] on the active class and flex-1 on inactive to control the ratio. flex-[3] gives a less dramatic expansion.
QIs the layout animation smooth?
Yes — the Framer Motion layout prop animates the flex transition automatically using FLIP, so no janky reflows.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track.
FAQ Dark
Dark-themed card FAQ with accent-colored border glow on the active item and a 'View more' inline link.