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.
npx shadcn@latest add https://ui.aryank.space/r/scatter-photo-physics.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | 12 BLANK photographs | One card per image, each seeded at a random position and angle. |
| influenceRadius / forceMagnitude | number | 150 / 3 | How close the pointer must come, and the peak of the random impulse applied per axis. |
headingtextWordmark behind the cards.
influenceRadiustextRadius in px within which the pointer disturbs a card.
matter-js