A 3D rotating sphere of photo thumbnails — built entirely on Canvas, zero dependencies. Drop it in, connect your CMS, and your images become a living globe that responds to mouse drag and category filtering.
What it does
Photos are distributed across a mathematically perfect sphere using the Fibonacci lattice. The globe auto-rotates and follows mouse drag with inertia. Click any tile to zoom it into view with a smooth detail panel slide-in. Click a category in the right nav to filter — matching tiles stay bright, the rest fade. Click anywhere or press Escape to dismiss.
Property controls
Every visual detail is exposed — globe radius, tile count, min/max tile size, auto-rotate speed, hover scale, background, tile border, selection ring, all five text colors, six independent font controls, panel width and offset, category nav visibility, and a custom dismiss hint string.
CMS binding
The Images array binds directly to any Framer CMS collection. Each item takes a photo, title, description, and category. Categories in the nav are driven by a separate array that you maintain alongside your collection.
Details
Canvas 2D renderer, DPI-aware (capped at 2×)
Fibonacci sphere distribution — no clustering at poles
Smooth per-tile opacity lerp for category transitions
Seeded randomness — tile layout is stable across re-renders
Works at any fixed size; respects container width and height
A 3D rotating sphere of photo thumbnails — built entirely on Canvas, zero dependencies. Drop it in, connect your CMS, and your images become a living globe that responds to mouse drag and category filtering.
What it does
Photos are distributed across a mathematically perfect sphere using the Fibonacci lattice. The globe auto-rotates and follows mouse drag with inertia. Click any tile to zoom it into view with a smooth detail panel slide-in. Click a category in the right nav to filter — matching tiles stay bright, the rest fade. Click anywhere or press Escape to dismiss.
Property controls
Every visual detail is exposed — globe radius, tile count, min/max tile size, auto-rotate speed, hover scale, background, tile border, selection ring, all five text colors, six independent font controls, panel width and offset, category nav visibility, and a custom dismiss hint string.
CMS binding
The Images array binds directly to any Framer CMS collection. Each item takes a photo, title, description, and category. Categories in the nav are driven by a separate array that you maintain alongside your collection.
Details
Canvas 2D renderer, DPI-aware (capped at 2×)
Fibonacci sphere distribution — no clustering at poles
Smooth per-tile opacity lerp for category transitions
Seeded randomness — tile layout is stable across re-renders
Works at any fixed size; respects container width and height
