Depth Card Carousel
A carousel whose side cards recede in scale, blur and rotation from one offset value.
- Category
- Patterns
- Added
- 2026-09-20
- Deps
- 2
- Updated
- 2026-09-20
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
"use client";
import { useState } from "react";
import { motion } from "framer-motion";
type Card = { id: string; title: string; image: string };
export function DepthCardCarousel({
cards,
spacing = 58,
scaleStep = 0.14,
blurStep = 1.6,
/** How many neighbours to render each side of the active card. */
window = 2,
}: {
cards: Card[];
spacing?: number;
scaleStep?: number;
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this pattern
Depth carousels are a solved shape, and the interesting part is not the arrangement but what it costs. Deriving position, scale, blur, opacity, z-index and rotation from a single signed offset keeps the composition symmetric at any card count — absolute value for the properties that should mirror, the signed value for rotation so side cards angle away from the centre rather than all leaning the same way. The part people miss is culling. Blur is a per-pixel filter, and a card at opacity zero still gets composited and still gets blurred, so a twenty-card carousel that renders every card keeps eighteen expensive invisible layers alive; rendering only the active card and a couple of neighbours each side is the single change that keeps it smooth. Everything animates through a spring on transform and filter, and the controls clamp at the ends rather than wrapping, which suits a finite set. Because the cards are buttons with labels and an `aria-current`, the carousel remains operable and legible without the depth effect.
Curator’s note
Built for viberdy 2.1. Culling beyond the visible window is the difference between smooth and stuttering once you pass a dozen cards.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
3D Card Carousel
patternsCards mounted on a rotating 3D ring — the active one faces forward, others recede.
Word Wheel Cylinder
text effectsA rotating word wheel built on a real cylinder — derived radius, accumulated rotation, no backwards spin on the wrap.