PRO

Scatter Photo Physics

Polaroid-style cards floating in zero gravity behind a wordmark, shoved around by the cursor. Gravity is switched off entirely and the bodies are held in by four static walls, so nothing settles: high air friction bleeds the energy off instead and each card drifts to a stop wherever it happens to be. Moving the pointer applies a randomly directed force to every card within a hundred and fifty pixels, so a sweep scatters the cluster rather than pushing it, and each card carries a random starting angle so the pile never looks aligned. The DOM cards are positioned from the physics bodies every frame; the simulation has no renderer of its own.

Component

BLANK

Install
npx shadcn@latest add https://ui.aryank.space/r/scatter-photo-physics.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
imagesstring[]12 BLANK photographsOne card per image, each seeded at a random position and angle.
influenceRadius / forceMagnitudenumber150 / 3How close the pointer must come, and the peak of the random impulse applied per axis.
Customize
headingtext

Wordmark behind the cards.

influenceRadiustext

Radius in px within which the pointer disturbs a card.

Dependencies
matter-js