3D Sphere Gallery turns a flat grid of photos into a draggable globe of billboards. Each image or video pins to a point on the sphere, and as the globe rotates the tile never tips or rolls. It always faces the camera. The result reads like a hovering cluster of artwork rather than a textured ball.
The points are distributed using a Fibonacci lattice with a pole offset, so no tile sits frozen on the spin axis. Tiles toward the back of the sphere dim and shrink, the ones in front pop, and the whole stage is wrapped in CSS perspective for real depth sorting.
Use it on a portfolio header, a case study landing, a press wall, an artists' grid, a film stills showcase, a product gallery, or any moment where a flat carousel feels too quiet. The component reads as both a gallery and an interactive object, so it can carry a section on its own without supporting copy.
It pairs especially well with editorial photography, art direction reels, film projects, and any content that earns being looked at from multiple angles.
A Source dropdown switches the component between hand-curated and CMS-driven content without any code edits.
Manual mode exposes an Items array. Each row is either an image or a video, with an optional poster for videos and an optional link for click-through. The order of the array controls the order of placement on the sphere.
CMS mode exposes a Collection Slot. Drop a Framer Collection List into the slot, point it at any collection that contains images or videos, and the sphere reads every row at once and tiles them on a single globe. The collection edits live, and the gallery refreshes with it.
Five effect modes ship inside the same component. Switching the Effect dropdown stacks a new motion on top of the base rotation, with intensity and speed both tunable.
None is the base state. The globe rotates with no overlay motion, so the focus rests on the photographs.
Breathe pulses the sphere's radius in and out uniformly. Best for hero sections where ambient breathing keeps the eye engaged without competing with copy nearby.
Wave drives a radial sine across the surface from pole to pole. Tiles ride a wave traveling around the globe, scaling subtly as it passes. Best for art direction reels and editorial features where the motion should feel like a living medium.
Magnetic pulls tiles toward the cursor. Tiles near the cursor scale up and lean toward the pointer, like a real magnetic field acting on the globe. Best for interactive showcases where you want the visitor to play.
Parallax eases the whole stage in a soft 2D drift toward the cursor. Best for layouts where the globe sits next to text and the motion should feel like the gallery is leaning into the reader.
All four inputs layer together unless an effect mode owns the cursor.
Drag to spin. Pointer-driven rotation in any direction.
Hover to steer. Cursor position nudges the spin without dragging, for a continuous gentle pull.
Idle auto-rotate. The sphere drifts on its own at a slow speed when no input is happening, so the gallery never goes still.
Scroll to spin (opt-in). A wheel listener converts vertical scroll into rotation. This traps page scroll while the cursor is over the sphere, so it is off by default and best reserved for isolated full-screen sections.
Each item can be a video instead of an image. Videos render muted, looping, and autoplaying, with an optional poster image while they load. In Manual mode, every row picks Image or Video. In CMS mode, the slot reads both image and video sources from the Collection List automatically.
Autoplay is suppressed during canvas, export, and thumbnail rendering, so the editor stays calm and quiet.
Every tile can carry a link. In Manual mode, each item exposes a Link control. In CMS mode, tiles inherit the link from the row's anchor, so dynamic routes like /blog/:slug resolve correctly in Framer Preview, in the popout window, and on the live site.
Every control in the property panel
Items. The top-level array of media used in Manual mode.
Layout. Tile count, sphere size, tile size, tile aspect (square, portrait, or landscape), gap (which widens the radius for breathing room without resizing tiles), and depth fade.
Motion. Auto rotate, auto speed, drag speed, hover strength, initial tilt, and wheel spin.
Effect. Mode dropdown, intensity, and speed.
Style. Tile radius, tile shadow, shadow color, background color, vignette, and vignette color.
Every control carries its own one-line description, so the panel reads as a guided setup rather than a dump of sliders.
There are no npm dependencies under the hood. There is no Three.js, no GSAP, no physics library. The geometry is pure math, the transforms are CSS, and the rotation runs in a single shared requestAnimationFrame loop. The React tree is rendered once, and per-frame work is imperative DOM mutation, not React re-renders. The bundle stays small, the runtime stays predictable, and the Framer project never locks to a specific 3D library version.
The component reads useIsStaticRenderer from Framer and switches to a quiet static preview during canvas, export, and thumbnail rendering. The globe does not spin in the editor, videos do not autoplay, and the layer panel stays fast even with the component dropped in. The full effect only runs in Preview and on the live site.
A single Framer code component, ready to drop on the canvas. Five effect modes. Manual and CMS source modes. Full image and video support. Click-through navigation that respects dynamic CMS routes. A grouped property panel covering items, layout, motion, effect, and style. No npm dependencies. A calm static preview. Free updates as the component evolves.
Made with 🖤 for Framer by Harsh
Harsh Upadhyay
