Depth Card Carousel
A carousel whose side cards recede in scale, blur and rotation from one offset value.
DOM + CSS1 dep1 file · 2 KB TSX
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
// ---------------------------------------------------------------
}Details
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.