Hanging Mobile Gallery with Physics on Canvas
Overview
A photo gallery for React and Next.js built as a hanging mobile sculpture, with brass wire arms and photo cards at the ends. It lowers from the ceiling and unfolds, every level turning at its own speed, and pulling a card makes the whole structure rebalance.
The arms are balanced the way a real mobile is: a side carrying more cards gets a shorter arm. Each level turns around its own pivot at a different speed and in its own direction, each card turns on its wire, and every hanging point swings like a pendulum behind the end of its arm. Cards are drawn in narrow slices at their own depth, so a turning card gets true perspective with no WebGL. The back of each card has a printed number and title.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 109 / Hero
Pluck the Strings Hero Animation with Canvas
On Load · Mouse Move · Drag · On Click
No. 108 / Cards
Pinned Notes Board Physics Animation with Canvas
On Load · Drag · Mouse Move
No. 107 / Gallery
Page Curl Book Flip Animation with Canvas
On Load · Drag · On Hover · On Click
(02)FAQ
Hanging Mobile Gallery with Physics on Canvas — FAQ
01How many photos can it hold?
Five to eight balance well. The tree of arms is built from the number of items you pass. Images are cropped to fill a portrait card.
02Can keyboard users do anything with it?
Yes. A real button gives the sculpture a spin, and focusing it does too. The photo titles are also in a list for screen readers.
03What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. The serif comes from a CSS variable, --mobile-serif, and falls back to Georgia. It uses no WebGL and no other dependencies.
04What happens with reduced motion?
The sculpture is drawn once, fully unfolded, with no running loop. All the text is visible.