Cover Flow

Apple-style Cover Flow component for React, inspired by iOS.
Smooth 3D motion, keyboard + drag support, and zero layout shifts.

Installation

npm

npm install @ashishgogula/coverflow

pnpm

pnpm add @ashishgogula/coverflow

yarn

yarn add @ashishgogula/coverflow

bun

bun add @ashishgogula/coverflow

Requirements

React 18+

Tailwind CSS v3+

motion (installed automatically)

Usage

import { CoverFlow, CoverFlowItem } from "@ashishgogula/coverflow";

const items: CoverFlowItem[] = [
  { id: 1, image: "/images/1.jpg", title: "Sanemi Shinazugawa" },
  { id: 2, image: "/images/2.jpg", title: "Obanai Iguro" },
  { id: 3, image: "/images/3.jpg", title: "Mitsuri Kanroji" },
  { id: 4, image: "/images/4.jpg", title: "Giyu Tomioka" },
];

export default function Example() {
  return (
    <div className="h-[500px] w-full">
      <CoverFlow
        items={items}
        itemWidth={250}
        itemHeight={250}
        initialIndex={2}
        enableReflection
      />
    </div>
  );
}

Props

CoverFlow

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | CoverFlowItem[] | — | Array of items to display | | itemWidth | number | 400 | Width of each card in pixels | | itemHeight | number | 400 | Height of each card in pixels | | stackSpacing | number | 100 | Spacing between stacked cards | | centerGap | number | 250 | Gap between the center card and the stack | | rotation | number | 50 | Rotation angle (in degrees) for stacked cards | | initialIndex | number | 0 | Index of the initially selected item | | enableReflection | boolean | false | Enable or disable reflection effect | | enableClickToSnap | boolean | true | Enable or disable clicking on items to snap them to the center. | | enableScroll | boolean | true | Enable or disable horizontal wheel scroll snapping. | | scrollThreshold | number | 100 | Wheel delta threshold required before snapping to next card. | | onItemClick | (item, index) => void | — | Callback when an item is clicked | | onIndexChange | (index) => void | — | Callback when the active index changes |

Features

Fluid Physics Engine

Keyboard First

Zero Layout Shift

Touch Ready

Dark Mode Native

Notes

Uses standard internally for full React compatibility

Tailwind CSS is required for styling

Demo

Live demo: https://coverflow.ashishgogula.in

License

MIT © Ashish Gogula

Built with Motion & Tailwind CSS