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

SphereFlow Gallery is an interactive 3D image gallery that arranges portrait images as curved cards around a spherical globe. Built with Three.js and designed for Framer, it transforms a standard image gallery into an immersive, rotating 3D experience.

Images naturally follow the curvature of the sphere, creating depth and a dynamic layered composition. Visitors can drag the 3D gallery to rotate it, use scroll to zoom in and out, or let the globe rotate automatically for a continuous motion effect.

The component also includes an Image Size control, allowing you to scale the gallery cards without changing the overall globe radius. You can customize the globe size, background color, auto-spin behavior, and interaction settings directly through Framer property controls.

Key Features

Interactive 3D image globe
Curved portrait image cards
Three.js-powered WebGL rendering
Drag to rotate the gallery
Smooth inertia after dragging
Automatic globe rotation
Adjustable auto-spin speed
Scroll-to-zoom interaction
Adjustable globe size
Adjustable image/card size
Custom background color
Supports up to 40 images
Automatic image distribution across globe layers
Prevents repetitive image alignment between layers
Responsive canvas resizing
Touch interaction support for mobile
Gradient fallback visuals when no images are provided

Best For

Portfolio websites
Photography portfolios
Creative agency websites
Designer portfolios
Digital art showcases
Fashion and editorial websites
Product image showcases
Creative landing pages
Interactive hero sections
Brand websites
Personal portfolios
Visual storytelling experiences

5a:[["$","$L5d",null,{"post":{"id":"01a08ffb-8695-710d-94d5-e2826c0bf557","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0412f842-fca5-456f-b801-c84139673b67","name":"Motion Lab","slug":"motion-lab-space","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2431349/avatar-WNkgnug1VXazTgLRq9leRMUuivwRpO.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"gMBd5ZrpIyTW6IySKe9t","resolved":true,"title":"SphereFlow Gallery","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"SphereFlow Gallery is an interactive 3D image gallery that arranges portrait images as curved cards around a spherical globe. Built with Three.js and designed for Framer, it transforms a standard image gallery into an immersive, rotating 3D experience."}]},{"type":"paragraph","content":[{"type":"text","text":"Images naturally follow the curvature of the sphere, creating depth and a dynamic layered composition. Visitors can drag the 3D gallery to rotate it, use scroll to zoom in and out, or let the globe rotate automatically for a continuous motion effect."}]},{"type":"paragraph","content":[{"type":"text","text":"The component also includes an Image Size control, allowing you to scale the gallery cards without changing the overall globe radius. You can customize the globe size, background color, auto-spin behavior, and interaction settings directly through Framer property controls."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive 3D image globe"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Curved portrait image cards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Three.js-powered WebGL rendering"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag to rotate the gallery"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth inertia after dragging"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic globe rotation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable auto-spin speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll-to-zoom interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable globe size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable image/card size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom background color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Supports up to 40 images"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic image distribution across globe layers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Prevents repetitive image alignment between layers"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive canvas resizing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Touch interaction support for mobile"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gradient fallback visuals when no images are provided"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Best For"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photography portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative agency websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Designer portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Digital art showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fashion and editorial websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product image showcases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Creative landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive hero sections"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Brand websites"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Personal portfolios"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Visual storytelling experiences"}]}]}]}]},"introduction":"Interactive 3D image globe gallery","slug":"sphereflow-gallery","author":{"framerUserId":"0412f842-fca5-456f-b801-c84139673b67","name":"Motion Lab","slug":"motion-lab-space","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2431349/avatar-WNkgnug1VXazTgLRq9leRMUuivwRpO.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0412f842-fca5-456f-b801-c84139673b67/01a08ffb-64de-76dd-9b4a-f07b6c30bab5.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-11T10:20:20.481Z","updatedAt":"2026-10-07T11:11:37.693Z","publishedAt":"2026-09-11T10:20:20.478Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://sphereflowgallery.framer.website/","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_GHBXEuHWhn9uD1agDkSFOPd57OmoRZ0XwApfk4A6F8J","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"IDuGdzcElu8Uq9w46O1H","tags":[]}}],"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-09-11T10:20:21.013Z","updatedAt":"2026-09-11T10:20:21.013Z","reported":false}}],"$L5f"]

Suggested for you