5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T113d,

What is DepthDeck Carousel?

A polished 3D card carousel built for hero sections, portfolios, and galleries. Click any card (left or right) to bring it to the front, enjoy fast transitions, and add extra delight with hover lift + scale

This component delivers a modern “depth deck” carousel with smooth spring animation and independent controls. Enable autoplay with a configurable interval, supports up to 15 images, show/hide navigation arrows and pagination dots separately, and keep the UI clean for any brand.

Features

3D depth stack with spring animation — cards stack with natural perspective, scale, and brightness falloff; spring config (stiffness 260, damping 20) makes transitions feel physical
Click-to-front on any card — click left or right cards to bring them forward; autoplay pauses permanently on first interaction
Keyboard navigation — ← / → arrow keys cycle slides; number keys 1–9 jump directly to a slide
Hover lift + image zoom — on desktop, hovering any card lifts it 30px and zooms the image to 105% scale
Per-image focal point — each image has independent X/Y position controls so the right part of every photo stays in frame
Active card details — front card gets a subtle bottom gradient overlay and a primaryColor border highlight automatically
Expanding dot indicator — active pagination dot animates to a wider pill; inactive dots are subtle circles
Glassmorphism nav buttons — arrows use backdrop-filter: blur for a frosted glass look over any background
Fully responsive — 3-tier layout system: Mobile (<480px), Tablet (480–900px), Desktop (≥900px) — card size, spacing, perspective, and rotation all adapt
Up to 15 images — configurable from the design panel
Autoplay interval: 0.5s – 10s — fine-grained control in 0.5s steps
7 aspect ratios — 9:16 (Phone), 2:3 (Portrait), 3:4 (Classic), 1:1 (Square), 4:3 (Standard), 3:2 (Photo), 16:9 (Wide)
Full brand control — primary color, border width/radius/color, shadow strength (0–2), arrow colors for default and hover states — all from the Properties Panel

Frequently Asked Questions

How many images does it support? Up to 15 images, each with independent X/Y focal point control.

Does clicking a card stop the autoplay? Yes. The first manual interaction (click, arrow, keyboard, or dot) permanently pauses autoplay for that session.

Does keyboard navigation work? Yes. Left/right arrow keys cycle through slides. Number keys 1–9 jump directly to that slide number.

Is hover lift available on mobile? No — hover lift and zoom are desktop-only. On mobile and tablet, the interaction is click-to-front only.

What's the autoplay interval range? 0.5 seconds to 10 seconds, adjustable in 0.5s steps from the Properties Panel.

What aspect ratios are available? Seven presets: 9:16 (Phone), 2:3 (Portrait), 3:4 (Classic), 1:1 (Square), 4:3 (Standard), 3:2 (Photo), 16:9 (Wide).

Is it responsive? Yes — three separate layout tiers for Mobile, Tablet, and Desktop, with different card sizes, spacing, perspective depth, and rotation angles automatically.

Does the component support videos? No, but it will be available soon.

5a:[["$","$L5d",null,{"post":{"id":"019c2908-f8b5-7a26-9431-fadb4d6a0d60","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"4b6fcd8f-a982-4dfd-a445-68ca06faffec","name":"Rayan Yasser","slug":"rayan-yasser","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/581419/avatar-YkJwZ1FYIh403vC5X1WGq1BaayIxhv.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"DrE28uITlVuHVkxeWsk9","resolved":true,"title":"DepthDeck Carousel","body":"$5e","bodyJson":null,"introduction":"Coverflow style 3D carousel","slug":"depthdeck-carousel","author":{"framerUserId":"4b6fcd8f-a982-4dfd-a445-68ca06faffec","name":"Rayan Yasser","slug":"rayan-yasser","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/581419/avatar-YkJwZ1FYIh403vC5X1WGq1BaayIxhv.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/DrE28uITlVuHVkxeWsk9/astra-card-carousel-JMnqkDYFU0z5nSHOPxJgFHITxAa2jf","metadata":{"tint":{"h":16,"s":94,"l":25},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-06T00:39:07.140Z","updatedAt":"2026-04-14T14:18:19.573Z","publishedAt":"2026-02-04T14:22:59.765Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cardcarousel.framer.website/","price":"4","paymentUrl":"https://yasserrayan.gumroad.com/l/DepthDeckCarousel","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"OpTRkq6OgtceZoaDCdjO","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-04T14:22:59.765Z","updatedAt":"2026-02-04T14:22:59.765Z","reported":false}}],"$L5f"]

Suggested for you