Depth carousel

A stack of cards receding into depth with motion blur. Hover one to lift it out of the stack and tilt it in perspective while the rest fall out of focus.

Galleries, hover, drag and scroll, Motion

Install

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

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

Usage

import { DepthCarousel } from "@/components/depth-carousel";

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

export default function Page() {
  return <DepthCarousel items={items} className="h-[560px]" />;
}

Props

Prop	Type	Default	Description
items	{ src; title }[]	twelve photos	Cards in the stack
direction	"up" \	"down"	"up"	Which way the stack climbs
drift	number	0.18	Cards per second it drifts on its own; 0 holds it still
blur	number	1	Strength of the motion blur, 0 to 2
label	string	"Photo stack"	Accessible name
className	string		Size and shape of the stage

More galleries

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.
Prism carousel: An endless carousel circling through liquid glass lenses at both edges.

All animated react carousels and galleries