About Image Sphere

Description

Show off a photo collection, a portfolio or team portraits on an interactive 3D sphere. Visitors drag to spin it, it keeps turning after they let go, and tapping any image opens it up close with its title and description.

Images are spread evenly around the sphere. The ones at the front are bigger and the ones curving away fade back, so it reads as a real 3D object without needing WebGL.

It resizes to fit whatever box you give it, so it works the same on desktop, tablet and phone.

Built for performance

The animation stops when the sphere is off-screen, the tab is hidden, or nothing is moving.
It respects the visitor's reduced-motion setting.
On the Framer canvas it shows a still preview.
No external libraries or CDN scripts.

Features

Drag to rotate with smooth momentum, using mouse, touch or pen
Optional auto-rotate with adjustable speed
Bigger images at the front, fading out at the back
Enlarges on hover
Tap an image to open it with its title and description; closes with Esc or a click outside
Resizes to fit any breakpoint
Images repeat automatically to fill the sphere, so it looks full even with a few photos
Settings for radius, image size, drag feel, momentum, maximum speed, perspective, border, shadow, and the popup's colours and fonts
Keyboard and screen-reader friendly popup

How to use

Drag Image Sphere onto your page and give it a square size (for example 600 × 600).
Add your images in the Images list. Title and description are optional and appear in the popup.
Set Fill To to choose how many spots the sphere has. Your images repeat to fill them.
Adjust Radius and Image Size (both are percentages of the component's size).
Turn Auto Rotate, Spotlight (the popup) and Shadow on or off to suit your design.