Tilt carousel

A looping row of photo cards that glides on its own: the middle one faces you while the rest turn away in 3D. Drag, flick or click to take over.

Galleries, drag, Motion

Install

npm i clsx motion tailwind-merge && curl -o components/tilt-carousel.tsx https://motion-brew.com/r/tilt-carousel.tsx

One self contained file for React and Tailwind CSS: tilt-carousel.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { TiltCarousel } from "@/components/tilt-carousel";

const items = [
  { src: "/work/one.jpg", title: "Soft Signal" },
  { src: "/work/two.jpg", title: "Tide Lines" },
];

export default function Page() {
  return <TiltCarousel items={items} />;
}

Props

Prop	Type	Default	Description
items	{ src; title }[]	twelve photos	Cards in the row
cardWidth	number	220	Card width in px; height follows at 4 by 5
tilt	number	40	How far the side cards turn away, in degrees
perspective	number	900	Perspective of the stage in px; lower is more dramatic
inactiveScale	number	0.86	Size of the cards beside the middle one, 0.5 to 1
speed	number	1	How quickly the row glides and settles; 2 is twice as fast
autoplay	boolean	true	Move on by itself, pausing while the pointer is over it
delay	number	3	Seconds each card stays with autoplay on
label	string	"Photo carousel"	Accessible name
className	string		Size and placement

More galleries

Depth carousel: A stack of cards receding into depth with motion blur.
Ribbon gallery: An endless ribbon of cards curved like a wraparound screen and tilted across the frame.
Infinite gallery: An endless wall of work that loops seamlessly in every direction.
Project index: An editorial project index with large photography: hover a project and its image arrives through a pixel, grain, gradient or mirror transition, then open it with one press.

All animated react carousels and galleries