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

About

SphereFlow 3D brings a stunning, fully interactive 3D sphere carousel straight into your Framer projects. Perfect for main heroes, creative portfolios, or feature showcases, this component lets you display images in an immersive three dimensional space. Visitors can easily drag, spin, and click items, making your site feel dynamic, premium, and highly engaging without touching a single line of code.

What it does

It arranges your images into a beautiful, rotating 3D sphere that responds naturally to user inputs. The component handles smooth auto rotation across both X and Y axes, manages drag sensitivity with realistic inertia damping, and applies depth blur to create a realistic sense of focus. It automatically highlights hovered items .

What you can customize

Sphere layout: Control the total item count, adjust the sphere radius, scale individual item sizes, tweak perspective depth, and change the overall container sizing to fit any layout.
Motion & physics: Toggle auto rotation on or off, set specific speeds for X and Y rotation, adjust drag sensitivity, enable pause on hover, and fine tune inertia damping for fluid movement.
Styling & effects: Customize item border radius and border colors, configure depth blur, and set near or far fog colors to seamlessly blend the sphere into your background.
Interaction & links: Enable click to open behavior, set default target links, choose whether to open links in a new tab, show or hide labels, and fully customize label fonts.

Great for

Portfolio projects and work showcases
Immersive hero sections on landing pages
Visual moodboards and gallery displays
Product feature highlights
Dynamic team or client logo grids

Share your build

If you ship something cool with it, post it on X and tag me @Dulajweb , or send it over. I’d love to see what you create.

Need help?

Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb

59:[["$","$L5c",null,{"post":{"id":"019f2b4c-88d2-744e-be97-2db1d6bc7d1d","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":"urVZp0XSdC17bgi5yoKW","resolved":true,"title":"CarouselSpherepro","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"SphereFlow 3D brings a stunning, fully interactive 3D sphere carousel straight into your Framer projects. Perfect for main heroes, creative portfolios, or feature showcases, this component lets you display images in an immersive three dimensional space. Visitors can easily drag, spin, and click items, making your site feel dynamic, premium, and highly engaging without touching a single line of code."}]},{"type":"customHeading","content":[{"type":"text","text":"What it does"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"It arranges your images into a beautiful, rotating 3D sphere that responds naturally to user inputs. The component handles smooth auto rotation across both X and Y axes, manages drag sensitivity with realistic inertia damping, and applies depth blur to create a realistic sense of focus. It automatically highlights hovered items ."}]},{"type":"customHeading","content":[{"type":"text","text":"What you can customize"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Sphere layout:","marks":[{"type":"bold"}]},{"type":"text","text":" Control the total item count, adjust the sphere radius, scale individual item sizes, tweak perspective depth, and change the overall container sizing to fit any layout."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion & physics:","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle auto rotation on or off, set specific speeds for X and Y rotation, adjust drag sensitivity, enable pause on hover, and fine tune inertia damping for fluid movement."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Styling & effects:","marks":[{"type":"bold"}]},{"type":"text","text":" Customize item border radius and border colors, configure depth blur, and set near or far fog colors to seamlessly blend the sphere into your background."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction & links:","marks":[{"type":"bold"}]},{"type":"text","text":" Enable click to open behavior, set default target links, choose whether to open links in a new tab, show or hide labels, and fully customize label fonts."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great for"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio projects and work showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Immersive hero sections on landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Visual moodboards and gallery displays"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product feature highlights"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dynamic team or client logo grids"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Share your build"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"If you ship something cool with it, post it on X and tag me @Dulajweb , or send it over. I’d love to see what you create."}]},{"type":"customHeading","content":[{"type":"text","text":"Need help?"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Questions or feedback? Reach me anytime: "},{"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 on X @Dulajweb"}]}]},"introduction":"Interactive 3D image sphere","slug":"carouselspherepro","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/6wlpait2"}],"post":null,"createdAt":"2026-07-04T04:04:23.837Z","updatedAt":"2026-08-22T14:07:42.649Z","publishedAt":"2026-07-04T04:04:23.835Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://carouselspherepro.framer.website/","price":"8","paymentUrl":"https://buy.polar.sh/polar_cl_yAAHVnDmVHtUbZQ3vb5iXbIRRlBwSDG6mU1rn4BYbjR","workshop":true,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"vHx6gJhsSSId0Mythzih"}}],"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-07-04T04:04:23.890Z","updatedAt":"2026-07-04T04:04:23.890Z","reported":false}}],"$L5e"]

Suggested for you