Coverflow Carousel

A 3D coverflow carousel component. Renders items in a horizontal flow with depth and rotation. Behaves with drag and keyboard controls. Use for visual navigation of image or content items.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/coverflow-carousel

npx layro-cli add @educlopez/coverflow-carousel

npx layro-cli add @educlopez/coverflow-carousel

bunx layro-cli add @educlopez/coverflow-carousel

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import { cn } from "@/lib/utils";
import { motion, useReducedMotion } from "motion/react";
import type { KeyboardEvent, ReactNode } from "react";
import { useCallback, useEffect, useRef, useState } from "react";

export interface CoverflowCarouselItem {
  alt?: string;
  content?: ReactNode;
  id: string;
  image?: string;
}