Horizontal Image Accordion

A highly fluid discovery experience. Utilizing hardware-accelerated CSS flex transitions layered with Framer Motion text animations, this component presents multiple narrow image strips side-by-side. When the user hovers over a strip, it seamlessly expands into a large focal point while the others organically shrink out of the way.

Live Preview

Horizontal Image Accordion

Default

Playground

PreviewUsageInstallation

Fluid Accordion

Hover over the image strips to expand them

The Vision

Phase 01

The Vision

Architecture

Phase 02

Architecture

Engineering

Phase 03

Engineering

Deployment

Phase 04

Deployment

Scale

Phase 05

Scale

Installation

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { ImageAccordion } from "@/components/creative/image-accordion";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { ImageAccordion } from "@/components/creative/image-accordion";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <ImageAccordion
        items{/* value */}
      />
    </div>
  );
}