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:T9dc,

Scroll 3D Carousel is a production-ready 3D media component built for Framer creators who want immersive motion.

Instead of forcing horizontal drag interactions, this carousel maps vertical scroll progress to smooth cylindrical rotation. The result is a cinematic 3D gallery that feels intuitive, stable, and layout-safe.

Unlike many 3D sliders that interfere with page behavior, this component preserves natural scrolling while delivering depth and movement.

Why Scroll-Controlled 3D Works Better

Vertical scroll is a universal interaction pattern. Users expect it to behave predictably.

By translating scroll into controlled 3D rotation, Scroll 3D Carousel:

• Maintains natural page flow

• Prevents scroll hijacking

• Feels smooth and responsive

• Enhances storytelling sections

• Keeps layout stability in Framer

The experience feels immersive without becoming distracting.

Key Features

• Scroll-based cylindrical rotation

• Supports images, GIFs, and videos

• Adjustable cylinder radius

• Custom card width and height

• Custom image corner radius

• Optional depth opacity fade

• Fade strength and fade distance controls

• Frame-rate independent smooth motion

• Transparent background

• Production-safe layout behavior

Media Support

Supports:

• JPG

• PNG

• WebP

• GIF

• MP4

• WebM

• MOV

Mixed media can be used in a single carousel.

Videos autoplay muted and loop seamlessly.

Built for Real Framer Projects

Scroll 3D Carousel works inside real Framer layouts — not just demos.

Perfect for:

• Designer portfolios

• Agency case studies

• SaaS product showcases

• NFT collections

• Brand storytelling sections

• Creative studio websites

No layout breaking. No fragile positioning tricks.

Customization Controls

All adjustments are available directly in the property panel:

• Cylinder Radius

• Card Width

• Card Height

• Image Radius

• Depth Fade Toggle

• Fade Strength

• Fade Distance

No code required.

Summary

Scroll 3D Carousel transforms vertical scroll into immersive 3D motion. Built for performance, layout safety, and cinematic depth, ready for real production use.

Smooth. Stable. Immersive.

5a:[["$","$L5d",null,{"post":{"id":"019c7601-e043-7b2f-966a-108c70873252","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7fd40dc2-5d88-48bc-bbee-09cf536c40ce","name":"CndlHaus Studio","slug":"antony-raphy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7fd40dc2-5d88-48bc-bbee-09cf536c40ce/oqu6u53f","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"QEQwSAcOGPIMCQOPFm0B","resolved":true,"title":"Scroll 3D Carousel","body":"$5e","bodyJson":null,"introduction":"Smooth scroll-driven 3D media depth","slug":"scroll-3d-carousel","author":{"framerUserId":"7fd40dc2-5d88-48bc-bbee-09cf536c40ce","name":"CndlHaus Studio","slug":"antony-raphy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7fd40dc2-5d88-48bc-bbee-09cf536c40ce/oqu6u53f","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/QEQwSAcOGPIMCQOPFm0B/scroll-3d-carousel-AcgxvdF0v23XpbFIJLkRDjDbW64rSK","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-14T08:36:28.566Z","updatedAt":"2026-04-30T18:50:00.289Z","publishedAt":"2026-02-19T13:06:00.387Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://social-wonders-652055.framer.app/","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_XC1kQ6J4eLi4GfOOsGjSGpvJn2KeNGM5ckYjJ2QyhZQ","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"U7HE889oeYjlf4BgawDV","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-19T13:06:00.387Z","updatedAt":"2026-02-19T13:06:00.387Z","reported":false}}],"$L5f"]

Suggested for you