Future UI

Depth Cascade

⟲ Carousels

3D diamond-pattern cascade with depth tilt, progressive blur, and scroll navigation.

carouselverticalcascadedepth3dperspectivescrollgsapdiamond

No preview available

GSAP + 3D Perspective ~ Scroll or Drag to Navigate

Controls

140
160
2.5
0

Carousels / React Component

About Depth Cascade

3D diamond-pattern cascade with depth tilt, progressive blur, and scroll navigation.

Category Carousels
Framework React + TypeScript
Dependencies gsap
Tags carousel, vertical, cascade, depth, 3d, perspective, scroll, gsap, diamond

Install Depth Cascade in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/depth-cascade.json?key=YOUR_LICENSE_KEY"

Usage example

import DepthCascade from './DepthCascade';

function Card({ src, title }: { src: string; title: string }) {
  return (
    <div className="relative w-[200px] h-[280px] rounded-2xl overflow-clip">
      <img src={src} alt={title} className="absolute inset-0 w-full h-full object-cover" />
      <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" />
      <p className="absolute bottom-4 left-4 text-white text-xl font-bold">{title}</p>
    </div>
  );
}

export default function Example() {
  return (
    <div className="h-[700px]">
      <DepthCascade className="w-full h-full" gap={140} spread={160} orientation="portrait" blurStrength={2.5} transition="parabola">
        <Card src="/photo1.jpg" title="Alpha" />
        <Card src="/photo2.jpg" title="Bravo" />
        <Card src="/photo3.jpg" title="Charlie" />
        <Card src="/photo4.jpg" title="Delta" />
        <Card src="/photo5.jpg" title="Echo" />
        <Card src="/photo6.jpg" title="Foxtrot" />
        <Card src="/photo7.jpg" title="Golf" />
        <Card src="/photo8.jpg" title="Hotel" />
        <Card src="/photo9.jpg" title="India" />
        <Card src="/photo10.jpg" title="Juliet" />
        <Card src="/photo11.jpg" title="Kilo" />
      </DepthCascade>
    </div>
  );
}