---
title: "3D Images Sphere — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Galleries. WebGL-powered 3D cloud gallery"
canonical: "https://framer.elliotli.dev/component/3d-images-sphere"
---

[Home](/)/[Components](/components)/[Galleries](/components/category/galleries)/3D Images Sphere

# 3D Images Sphere

WebGL-powered 3D cloud gallery

[View on Framer](https://framer.com/marketplace/components/3d-images-sphere/?via=elliot-li)

![3D Images Sphere preview image 1](https://framer.elliotli.dev/og/component/3d-images-sphere/b657c251f0b85d10/1600x1044.jpg)

## Summary

WebGL-powered 3D cloud gallery

## Description

### About

**3D Image Sphere** brings a dynamic, WebGL-powered 3D cloud gallery to your Framer websites. Built on **Three.js** and React, it projects your image collection onto an interactive spherical layout featuring physics-based inertia spin, smooth hover scaling, and click-to-focus lightboxing. With automatic billboard alignment, every image cleanly faces the viewer as the sphere rotates in space.

### What it does

-   **Interactive WebGL Sphere:** Maps custom image arrays onto 3D coordinates with deterministic positioning for consistent canvas and live preview rendering.
    
-   **Momentum Drag & Physics:** Features responsive pointer-capture dragging with customizable easing curves and smooth inertia decay on release.
    
-   **Click-to-Focus & Backdrop Dimming:** Clicking any card smoothly interpolates it to the front-center focal point while dimming background planes for clean visual hierarchy.
    
-   **Camera-Facing Billboards:** Dynamically syncs matrix quaternions so images remain parallel to the viewport during rotation.
    
-   **Canvas & SSR Safe:** Automatically detects Framer’s static rendering engine (`useIsStaticRenderer`) to display optimized static snapshots without mounting WebGL animation loops during design editing.
    
-   **Performance & Display Optimization:** Built-in anisotropy scaling, dynamic DPR adaptation via media queries, and complete WebGL context cleanup on unmount.
    

### What you can customize

All properties are controllable directly through Framer’s Property Panel:

-   **Images:** Upload or link custom images directly from the property array (defaults to placeholder stock images).
    
-   **Sphere Geometry:** Tweak **Radius**, **Image Size**, camera **Distance**, and **Field of View (FOV)** to adjust depth and card density.
    
-   **Auto Rotation:** Toggle automated spinning with fine-grained control over **Rotation X** and **Rotation Y** speeds.
    
-   **Drag Dynamics:** Enable pointer rotation, adjust **Drag Speed**, and tweak **Inertia** decay physics.
    
-   **Hover & Focus:** Adjust **Hover Scale** intensity, **Focus Size**,
    

**Connect**

Made with 💛 by [@Karim Saif](/community/creator/@karim-saif/)

## Rank history [How rankings work →](/terms#rankings)

-   All · #3726

## Details

- **Author**: Karim Saif
- **Published**: 2026-07-27
- **Updated**: 2026-07-27
- **Added**: 2026-07-27
- **Categories**: Galleries

## More like this

-   [Geometry CMS Gallery](/component/geometry-cms-gallery) — Akshay M · $20 — Scroll-Animated Portfolio Gallery
-   [Fluid InfiniteScroll](/component/fluid-infinitescroll) — Atemo Art · $16 — LIQUID / PRISM Gallery
-   [Isometric Gallery](/component/isometric-gallery) — Edi Priatama · $5 — 3D image gallery
-   [HoverExpand Gallery](/component/hoverexpand-gallery) — piyush vichare · $2 — HoverExpand Gallery is a modern Framer component for creating interactive image galleries with smooth hover expansion.