Cover Flow Carousel

A highly premium draggable carousel that creates a perfect 3D cylinder illusion without using WebGL. By dynamically hooking into Framer Motion's x offset, each card mathematically calculates its own rotateY, scale, and filter based on its physical distance from the center of your screen.

Live Preview

Cover Flow Carousel

Default

Playground

PreviewUsageInstallation

Cover Flow 3D

Drag horizontally to rotate the carousel

Midnight City

Neon Genesis

Ethereal Space

Quantum Flow

Neural Network

Cyberpunk 2077

Installation

Usage Guide

1. Import the Component

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

import { CoverFlowCarousel } from "@/components/creative/cover-flow-carousel";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { CoverFlowCarousel } from "@/components/creative/cover-flow-carousel";

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