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

shadcn CLI (copies the source into your project)

npx shadcn add https://useplanes.com/r/cover-flow.json

The registry build is maintained in Planes and installs as @/components/ui/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 | | enableAudio | boolean | false | Enable procedural click sound with stereo panning and velocity sensitivity | | scrollThreshold | number | 100 | Wheel delta threshold required before snapping to next card | | reduceMotion | boolean \| undefined | undefined | Disable all 3D transforms and animations. true always disables, false always enables, omit to respect the OS accessibility setting | | className | string | — | Additional CSS class names for the root element | | onItemClick | (item: CoverFlowItem, index: number) => void | — | Callback when an item is clicked | | onIndexChange | (index: number) => void | — | Callback when the active index changes (does not fire on initial mount) | | renderImage | (props: RenderImageProps) => ReactNode | — | Custom image renderer — use this to pass a Next.js <Image> or any custom component |

Features

Fluid Physics Engine

Keyboard First

Zero Layout Shift

Touch Ready

Dark Mode Native

Notes

Uses a standard <img> internally by default — pass renderImage to use Next.js <Image> or any custom renderer

Tailwind CSS is required for styling

Demo

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

Docs and props reference: https://useplanes.com/components/cover-flow

Changelog

1.1.2

• Fixed cards overflowing on mobile — container is now measured via ResizeObserver and all dimensions auto-scale proportionally. Desktop is unchanged.
• Fixed reflection jank on Safari desktop — reflection layer promoted to GPU compositing layer; SVG feTurbulence filter auto-disabled on Safari
• Fixed division-by-zero when itemWidth={0} is passed

1.1.1

• Fixed major mobile lag on iOS Safari/Brave caused by the SVG feTurbulence reflection filter (auto-disabled on touch/narrow screens; a CSS-only mirrored reflection is used instead)

1.1.0

• Added enableAudio prop (procedural click with stereo panning + velocity sensitivity) and reduceMotion prop
• Smoother drag tracking and debounced wheel scroll

License

MIT © Ashish Gogula

Built with Motion & Tailwind CSS