5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2qlox892e2j_q.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/07e2f_v4-u-we.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/2c_4he4mvu2r0.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3q7g04e77g4lf.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/0lmnldnlzsgok.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/0z2hzm-7v_g2c.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0p4vy6mn-x9zs.js"],"PostDetailCard"] 5d:Tce7,

3D Card Carousel – Interactive Image Slider for Framer

Give your Framer projects a polished, modern look with this 3D Card Carousel, a ready-to-use drop-in component that displays images in a dynamic, rotating card layout. Perfect for portfolios, landing pages, galleries, photography sites, and hero sections.

This component creates an immersive, swipeable 3D experience where cards tilt, scale, and animate smoothly as the user navigates through them. Includes built-in pagination controls and fully customizable styling.

Features

3D Card Layout

Each image is displayed as a rounded-corner card with tilt and depth effects
Center card is highlighted with dynamic scaling and elevation
Side cards automatically angle outward for a cinematic look

Drop-and-Play Image Setup

Replace images instantly in Framer—no coding required
Supports any aspect ratio
Works with both static images and CMS-driven image lists

Easy Customization

Change card size, corner radius, spacing, tilt intensity
Adjust animation speed + easing
Edit background color or set transparent mode
Enable/disable shadows, depth blur, or perspective drift

Navigation Controls

Built-in left/right buttons
Optional autoplay
Optional drag/swipe support for touch screens

Smooth Animations

Cross-fade transitions
Sliding card movement
Depth + parallax simulation
Performance-optimized for mobile & desktop

Perfect for Many Use Cases

Creative portfolios
Photography galleries
Team members carousel
Testimonials (with images)
App or product card displays
Hero sections with strong visual storytelling

How to Use (Framer-Ready)

Add the component to your canvas
Replace the default images with your own
Adjust settings in the right-panel controls:
- Card tilt
- Spacing
- Image list
- Navigation buttons
- Autoplay
Publish or export—no setup required

The component is fully responsive and adapts beautifully to any layout.

Technical Highlights

Built with React + Framer Motion
Optimized for Framer’s Variant and Property Controls API
Works with Framer CMS Collections
Lightweight and GPU-accelerated animations
Zero external dependencies

What’s Included

Full component with editable layers
Property controls for customization
Prebuilt animation variants
Clean, production-ready code
Documentation directly in the component panel

59:[["$","$L5c",null,{"post":{"id":"019b128a-d3bf-70bb-ae42-cf809f66f97d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6fb7a007-c022-4ff2-b2f9-820aa08c012e","name":"ahmad madhoun","slug":"ahmad-madhoun","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/33030/Zoho-Profile-Avatar-ahmed-6SZCm05NhRAbYdmsTLsQesSq0Jr2gM.png","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"pGw2joOspf2z40bTJd1D","resolved":true,"title":"SpinDeck_3D","body":"$5d","bodyJson":null,"introduction":"","slug":"spindeck-3d","author":{"framerUserId":"6fb7a007-c022-4ff2-b2f9-820aa08c012e","name":"ahmad madhoun","slug":"ahmad-madhoun","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/33030/Zoho-Profile-Avatar-ahmed-6SZCm05NhRAbYdmsTLsQesSq0Jr2gM.png","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/pGw2joOspf2z40bTJd1D/spindeck-3d-kwdlHXlTDT45FLay5FYUttCR3y8pWP"}],"post":null,"createdAt":"2025-12-07T03:18:42.570Z","updatedAt":"2025-12-12T11:57:06.975Z","publishedAt":"2025-12-12T12:30:46.719Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/SpinDeck-3D-L1Jf.js@qGRdlpC6avicL6BaEyog","previewUrl":"https://tactical-value-728671.framer.app","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"qGRdlpC6avicL6BaEyog"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":18,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-12-12T12:30:46.719Z","updatedAt":"2025-12-12T12:30:46.719Z","reported":false}}],"$L5e"]

Suggested for you