component
PhotoParticleCloud
By Mehedi Hasan
Details
- Mehedi HasanAuthor
- componentType
- 2026-06-27Published
- 2026-07-22Updated
- 2026-06-27Added
- MapsCategories
Summary
3D photo sphere with CMS binding
Description
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
Introduction
3D photo sphere with CMS binding
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #1512