Skip to content

component

PhotoParticleCloud

By Mehedi Hasan

Details

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.

15011001150116998/148/228/309/79/15
  • All · #1512