SphereFlow Gallery

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