---
title: "Depth Cascade — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Abhrajit Ray · Cards. 3D parabolic movement gallery"
canonical: "https://framer.elliotli.dev/component/depth-cascade"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Depth Cascade

# Depth Cascade

3D parabolic movement gallery

[View on Framer](https://framer.com/marketplace/components/depth-cascade/?via=elliot-li)

![Depth Cascade preview image 1](https://framer.elliotli.dev/og/component/depth-cascade/2e09cb86d6192fa7/1600x1200.jpg)

## Summary

3D parabolic movement gallery

## Description

## Why it works:

Most carousels move sideways. Cascading cards into depth gives you a focal point that always reads first while showing what's around it as soft context. Each step has a parabolic dip that lifts and tilts the card mid-transit, so changes feel choreographed instead of mechanical.

### Under the hood:

\- A precomputed slot table maps each integer step to an \`(x, y)\` position so layout per frame is two memory reads and a lerp, not trig.

\- A single offset advances continuously; cards interpolate between adjacent slots with a fractional \`t\` for fluid motion.

\- Scale, opacity, blur, and rotation all derive from a card's "level" (distance from the focused slot), so visual depth stays consistent at any gap or spread.

\- A parabolic dip (\`t _(1 - t)_ 4\`) adds a Z-axis bump and brief fade during transit — the cue that makes the movement feel intentional.

\- Cards outside the active depth band are skipped each frame.

\- Wheel input nudges the target offset; drag updates it directly with inertia. After release, GSAP snaps to the nearest integer with an eased decay.

\- Auto-pauses when scrolled offscreen via \`IntersectionObserver\`.

### Best for:

\- Product galleries and case-study reels

\- Stream and editorial feeds

\- Music albums and video chapters

\- Onboarding flows that want a "next up" peek

\- Hero sections with rotating featured cards

### Controls:

\- **Cards**: array of component instances — design any card in Framer and feed it in

\- **Orientation**: portrait (vertical stack) or landscape (horizontal stack)

\- **Gap**: distance between depth levels along the scroll axis (40–320 px)

\- **Spread**: how far cards fan out across the secondary axis (0–400 px)

\- **Blur**: out-of-focus blur applied to deeper cards (0–8)

\- **Transition**: parabola (animated dip) or none (linear)

\- **Interactive**: enable wheel and drag scrubbing

\- **Auto Play**: auto-advance interval in ms (0 disables)

### Built for production:

GSAP handles the inertia tweens and snap easing. The slot table is built once per gap/spread/orientation change, so the per-frame work is constant regardless of how many cards you connect. Pointer events handle drag on both mouse and touch with \`touchAction: none\` so the gesture doesn't fight page scroll. \`IntersectionObserver\` pauses autoplay when the component scrolls offscreen.

## Rank history [How rankings work →](/terms#rankings)

-   All · #10201

## Details

- **Author**: Abhrajit Ray
- **Price**: $5.00
- **Published**: 2026-05-30
- **Updated**: 2026-05-30
- **Added**: 2026-05-16
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator