Logo Ball Pit Physics Section with Canvas
Overview
An integrations section for React and Next.js where logos sit on heavy glossy discs that pour in and fill the bottom of the page. Stir them with the cursor, grab and throw one, and scroll to tilt the floor.
Up to 40 discs pour in from the top like a hopper, cross the heading on the way down and pile up in the bottom half of the section. A small solver written for this component handles the weight, the friction and the spin, so discs roll against each other and the mark on each disc turns while its highlight stays fixed to the light, which is what makes them read as round and glossy.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 100 / Text
Falling Letters Physics Heading with Canvas
On Load · Drag · On Click
No. 098 / Cards
Crumpled Paper Card You Can Crush and Throw, on Canvas
On Load · On Click · Drag
No. 095 / Cards
Throwable Photo Card Deck with Riffle Shuffle in React
On Load · Drag · On Click
(02)FAQ
Logo Ball Pit Physics Section with Canvas — FAQ
01How do I use my own logos?
Pass logos, a list of objects with a name and either one of the 14 built-in marks or a draw function. draw gets a Canvas 2D context scaled to a box from -1 to 1, so you can fill a Path2D from your SVG logo once it is scaled to that box.
02How many discs can I have?
Set count. The default is 40, and phones cap it at 22 so the discs still have room to move. The logos repeat to fill the count.
03What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. The physics and drawing use no other library. The section fills the height of the screen and sets its own dark background.
04What happens with reduced motion?
The discs are settled before the first frame and no loop runs. All text stays visible, and the button drops a new arrangement instantly.