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/077g_l9cwe8hz.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/2ouyrs2yz196q.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/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/2885u7skzba5_.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/0djs9po3g19ek.js","/creators-assets/_next/static/immutable/chunks/1_ej2mmnwnp37.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.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/0bcmpcsc4ih7d.js"],"PostDetailCard"] 5d:T777,

About

3D Scroll Canvas brings an immersive, floating 3D photo gallery straight into your Framer projects. Perfect for landing pages, portfolio displays, or creative sections where you want images to react dynamically as users scroll through your site. Customizing everything takes just a few clicks, giving you full control over depth, motion, and visual style.

What it does

Creates a smooth 3D spatial canvas that displays your image collection with realistic mouse parallax and hover zoom effects. The component handles layout positioning automatically based on your seed settings, supports image links, and allows wheel or touch controls to capture page scroll for a dedicated interactive experience.

What you can customize

Layout and Spacing: Total image count, base image size, size variance, X/Y spatial spread, and layout seed variations.
Interactions and Effects: Mouse parallax intensity, hover zoom effect scale, and capture scroll toggle.
Typography and Visuals: Show or hide image titles, customize title font, size, and color, plus optional background color or transparency settings.

Great for

Creative agency portfolios and photo showcases
Product feature highlights on landing pages
Interactive hero sections
Studio and designer work previews
Media rich background sections

Share your build

If you build something cool with this, tag me on X @Dulajweb or send it my way. I always love seeing what everyone creates with these components.

Need help?

Got questions, feedback, or need a hand setting it up? Drop me a line anytime at dulajdilshan766@gmail.com or send a message on X @Dulajweb

59:[["$","$L5c",null,{"post":{"id":"019f951a-42ef-74ca-9805-f78a413da84f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj dilshan","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"qkY70gmR6iC3ki9H1SlM","resolved":true,"title":"Scroll3DGalleryPro","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"3D Scroll Canvas brings an immersive, floating 3D photo gallery straight into your Framer projects. Perfect for landing pages, portfolio displays, or creative sections where you want images to react dynamically as users scroll through your site. Customizing everything takes just a few clicks, giving you full control over depth, motion, and visual style."}]},{"type":"customHeading","content":[{"type":"text","text":"What it does"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Creates a smooth 3D spatial canvas that displays your image collection with realistic mouse parallax and hover zoom effects. The component handles layout positioning automatically based on your seed settings, supports image links, and allows wheel or touch controls to capture page scroll for a dedicated interactive experience."}]},{"type":"customHeading","content":[{"type":"text","text":"What you can customize"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout and Spacing:","marks":[{"type":"bold"}]},{"type":"text","text":" Total image count, base image size, size variance, X/Y spatial spread, and layout seed variations."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactions and Effects:","marks":[{"type":"bold"}]},{"type":"text","text":" Mouse parallax intensity, hover zoom effect scale, and capture scroll toggle."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography and Visuals:","marks":[{"type":"bold"}]},{"type":"text","text":" Show or hide image titles, customize title font, size, and color, plus optional background color or transparency settings."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great for"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency portfolios and photo showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product feature highlights on landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Studio and designer work previews"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Media rich background sections"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Share your build"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"If you build something cool with this, tag me on X @Dulajweb or send it my way. I always love seeing what everyone creates with these components."}]},{"type":"customHeading","content":[{"type":"text","text":"Need help?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Got questions, feedback, or need a hand setting it up? Drop me a line anytime at "},{"type":"text","text":"dulajdilshan766@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:dulajdilshan766@gmail.com","target":"_blank"}}]},{"type":"text","text":" or send a message on X @Dulajweb"}]}]},"introduction":"interactive 3D floating Gallery","slug":"scroll3dgallerypro","author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj dilshan","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0bce05c0-4760-4da5-b2f4-851230a1db47/019f9519-f2a6-717e-bac1-56c31aacc139.png"}],"post":null,"createdAt":"2026-07-24T17:09:13.727Z","updatedAt":"2026-08-28T03:43:06.151Z","publishedAt":"2026-07-24T17:09:13.724Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://scroll3dgallery.framer.website/","price":"15","paymentUrl":"https://buy.polar.sh/polar_cl_IjeGMpaS2uwRO3vwezjnH6WeBWPKNDxbiEKvF3Gw8qi","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"tv2RvtvZR9lnbvYoHGKn"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-24T17:09:14.095Z","updatedAt":"2026-07-24T17:09:14.095Z","reported":false}}],"$L5e"]

Suggested for you