Tumble Wall

A pile of photos, avatars or tags that rains in and can be thrown around

tumble-wall-tw

Customize

Frame Color

Text Color

Background

Count

Size

116px

Size Variance

0.40

Fill

0.40

Radius

18px

Frame Width

6.0px

Shadow

0.50

Gravity

1.00

Gravity X

0.00

Bounce

0.32

Friction

0.30

Air Friction

0.012

Spin

0.50

Drift

0.00

Stagger

55ms

Throw

1.00

Pop Force

1.00

Drag Stiffness

0.20

Hover Scale

1.06

TitlesMonochromeDraggableContainPaused

Props

Name	Type	Default	Description
`items`	TumbleWallItem[]	`studio portrait collection`	Photos or labels in the pile: { src?, alt?, title?, href? }. Items repeat to reach count. An item without src becomes a text tag, and an item with href becomes a link.
`count`	number	`24`	Number of bodies in the pile, from 1 to 80.
`shape`	"circle" \| "square" \| "card" \| "chip" \| "mixed"	`"circle"`	Shape of each body, and of its collision outline. Card is a 3:4 portrait, chip is a pill with an avatar and the title, mixed varies circles, squares and cards.
`size`	number	`116`	Width of a body in pixels before fitting. Chips use 40% of it as their height.
`sizeVariance`	number	`0.4`	How much body sizes vary, from 0 (all equal) to 1.
`fill`	number	`0.4`	Largest share of the frame the pile may cover. Bodies shrink to fit, so the same pile works from phones to wide screens.
`radius`	number	`18`	Corner radius of squares and cards, in pixels at the base size.
`frame`	"none" \| "border" \| "polaroid"	`"none"`	A rim of frameColor around each photo, or a print with a deeper bottom edge that holds the title.
`frameWidth`	number	`6`	Width of the frame in pixels at the base size.
`frameColor`	string	`"#FFFFFF"`	Colour of frames, chips and the title label.
`textColor`	string	`"#0A0A0A"`	Colour of titles on frames, chips and the label.
`backgroundColor`	string	`"transparent"`	Background of the frame. Transparent shows whatever is behind the component.
`shadow`	number	`0.5`	Strength of the soft shadow under each body, from 0 to 1.
`showTitles`	boolean	`true`	Show item titles: on polaroid frames, and in a small label above a hovered, focused or tapped photo.
`monochrome`	boolean	`false`	Render photos in black and white. A hovered or held photo fades back to colour.
`hoverScale`	number	`1.06`	How far a hovered photo lifts out of the pile. 1 turns it off.
`gravity`	number	`1`	Vertical gravity from -3 to 3. Negative values pile the photos against the top edge.
`gravityX`	number	`0`	Horizontal gravity from -3 to 3, for piles that lean or slide into a side.
`bounce`	number	`0.32`	Restitution of collisions, from 0 (dead stop) to 0.95.
`friction`	number	`0.3`	Surface friction between bodies, from 0 to 1.
`airFriction`	number	`0.012`	Air drag. Higher values slow everything down.
`spin`	number	`0.5`	Tilt and spin the photos have as they enter.
`drift`	number	`0`	A slow current that keeps bodies floating. Pair it with zero gravity for a weightless pile.
`entrance`	"rain" \| "burst" \| "drop" \| "none"	`"rain"`	How the pile arrives once the component scrolls into view: one by one, out from the middle, all at once, or already settled.
`stagger`	number	`55`	Milliseconds between bodies in the rain entrance.
`draggable`	boolean	`true`	Allow picking photos up and throwing them.
`dragStiffness`	number	`0.2`	How tightly a held photo follows the pointer. Low values let it swing from where you grabbed it.
`throwStrength`	number	`1`	Multiplier for the speed a photo keeps when released.
`popForce`	number	`1`	Strength of a tap. Tapping a photo makes it hop; tapping empty space pops the photos around it. 0 turns both off.
`contain`	boolean	`true`	Close the edge the photos fell in through, so throws stay inside. Off, they can fly out and fall back in.
`paused`	boolean	`false`	Freeze the physics. Photos can still be moved by hand.
`ariaLabel`	string	`"Photo pile"`	Accessible name of the group.
`onSelect`	(item, index) => void	`—`	Called when a photo is clicked, tapped or activated with the keyboard without being dragged.
`ref`	{ drop, shake, pop }	`—`	drop() replays the entrance, shake(strength?) tosses the whole pile, pop(x, y, strength?) taps the pile at a point in pixels.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 360px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

itemsTumbleWallItem[]

Photos or labels in the pile: { src?, alt?, title?, href? }. Items repeat to reach count. An item without src becomes a text tag, and an item with href becomes a link.

Defaultstudio portrait collection

countnumber

Number of bodies in the pile, from 1 to 80.

Default24

shape"circle" | "square" | "card" | "chip" | "mixed"

Shape of each body, and of its collision outline. Card is a 3:4 portrait, chip is a pill with an avatar and the title, mixed varies circles, squares and cards.

Default"circle"

sizenumber

Width of a body in pixels before fitting. Chips use 40% of it as their height.

Default116

sizeVariancenumber

How much body sizes vary, from 0 (all equal) to 1.

Default0.4

fillnumber

Largest share of the frame the pile may cover. Bodies shrink to fit, so the same pile works from phones to wide screens.

Default0.4

radiusnumber

Corner radius of squares and cards, in pixels at the base size.

Default18

frame"none" | "border" | "polaroid"

A rim of frameColor around each photo, or a print with a deeper bottom edge that holds the title.

Default"none"

frameWidthnumber

Width of the frame in pixels at the base size.

Default6

frameColorstring

Colour of frames, chips and the title label.

Default"#FFFFFF"

textColorstring

Colour of titles on frames, chips and the label.

Default"#0A0A0A"

backgroundColorstring

Background of the frame. Transparent shows whatever is behind the component.

Default"transparent"

shadownumber

Strength of the soft shadow under each body, from 0 to 1.

Default0.5

showTitlesboolean

Show item titles: on polaroid frames, and in a small label above a hovered, focused or tapped photo.

Defaulttrue

monochromeboolean

Render photos in black and white. A hovered or held photo fades back to colour.

Defaultfalse

hoverScalenumber

How far a hovered photo lifts out of the pile. 1 turns it off.

Default1.06

gravitynumber

Vertical gravity from -3 to 3. Negative values pile the photos against the top edge.

Default1

gravityXnumber

Horizontal gravity from -3 to 3, for piles that lean or slide into a side.

Default0

bouncenumber

Restitution of collisions, from 0 (dead stop) to 0.95.

Default0.32

frictionnumber

Surface friction between bodies, from 0 to 1.

Default0.3

airFrictionnumber

Air drag. Higher values slow everything down.

Default0.012

spinnumber

Tilt and spin the photos have as they enter.

Default0.5

driftnumber

A slow current that keeps bodies floating. Pair it with zero gravity for a weightless pile.

Default0

entrance"rain" | "burst" | "drop" | "none"

How the pile arrives once the component scrolls into view: one by one, out from the middle, all at once, or already settled.

Default"rain"

staggernumber

Milliseconds between bodies in the rain entrance.

Default55

draggableboolean

Allow picking photos up and throwing them.

Defaulttrue

dragStiffnessnumber

How tightly a held photo follows the pointer. Low values let it swing from where you grabbed it.

Default0.2

throwStrengthnumber

Multiplier for the speed a photo keeps when released.

Default1

popForcenumber

Strength of a tap. Tapping a photo makes it hop; tapping empty space pops the photos around it. 0 turns both off.

Default1

containboolean

Close the edge the photos fell in through, so throws stay inside. Off, they can fly out and fall back in.

Defaulttrue

pausedboolean

Freeze the physics. Photos can still be moved by hand.

Defaultfalse

ariaLabelstring

Accessible name of the group.

Default"Photo pile"

onSelect(item, index) => void

Called when a photo is clicked, tapped or activated with the keyboard without being dragged.

Default—

ref{ drop, shake, pop }

drop() replays the entrance, shake(strength?) tosses the whole pile, pop(x, y, strength?) taps the pile at a point in pixels.

Default—

classNamestring

Classes for the root element. It fills its parent, with a 360px minimum height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

items

TumbleWallItem[]

studio portrait collection

Photos or labels in the pile: { src?, alt?, title?, href? }. Items repeat to reach count. An item without src becomes a text tag, and an item with href becomes a link.

count

number

24

Number of bodies in the pile, from 1 to 80.

shape

"circle" | "square" | "card" | "chip" | "mixed"

"circle"

Shape of each body, and of its collision outline. Card is a 3:4 portrait, chip is a pill with an avatar and the title, mixed varies circles, squares and cards.

size

number

116

Width of a body in pixels before fitting. Chips use 40% of it as their height.

sizeVariance

number

0.4

How much body sizes vary, from 0 (all equal) to 1.

fill

number

0.4

Largest share of the frame the pile may cover. Bodies shrink to fit, so the same pile works from phones to wide screens.

radius

number

18

Corner radius of squares and cards, in pixels at the base size.

frame

"none" | "border" | "polaroid"

"none"

A rim of frameColor around each photo, or a print with a deeper bottom edge that holds the title.

frameWidth

number

6

Width of the frame in pixels at the base size.

frameColor

string

"#FFFFFF"

Colour of frames, chips and the title label.

textColor

string

"#0A0A0A"

Colour of titles on frames, chips and the label.

backgroundColor

string

"transparent"

Background of the frame. Transparent shows whatever is behind the component.

shadow

number

0.5

Strength of the soft shadow under each body, from 0 to 1.

showTitles

boolean

true

Show item titles: on polaroid frames, and in a small label above a hovered, focused or tapped photo.

monochrome

boolean

false

Render photos in black and white. A hovered or held photo fades back to colour.

hoverScale

number

1.06

How far a hovered photo lifts out of the pile. 1 turns it off.

gravity

number

1

Vertical gravity from -3 to 3. Negative values pile the photos against the top edge.

gravityX

number

0

Horizontal gravity from -3 to 3, for piles that lean or slide into a side.

bounce

number

0.32

Restitution of collisions, from 0 (dead stop) to 0.95.

friction

number

0.3

Surface friction between bodies, from 0 to 1.

airFriction

number

0.012

Air drag. Higher values slow everything down.

spin

number

0.5

Tilt and spin the photos have as they enter.

drift

number

0

A slow current that keeps bodies floating. Pair it with zero gravity for a weightless pile.

entrance

"rain" | "burst" | "drop" | "none"

"rain"

How the pile arrives once the component scrolls into view: one by one, out from the middle, all at once, or already settled.

stagger

number

55

Milliseconds between bodies in the rain entrance.

draggable

boolean

true

Allow picking photos up and throwing them.

dragStiffness

number

0.2

How tightly a held photo follows the pointer. Low values let it swing from where you grabbed it.

throwStrength

number

1

Multiplier for the speed a photo keeps when released.

popForce

number

1

Strength of a tap. Tapping a photo makes it hop; tapping empty space pops the photos around it. 0 turns both off.

contain

boolean

true

Close the edge the photos fell in through, so throws stay inside. Off, they can fly out and fall back in.

paused

boolean

false

Freeze the physics. Photos can still be moved by hand.

ariaLabel

string

"Photo pile"

Accessible name of the group.

onSelect

(item, index) => void

—

Called when a photo is clicked, tapped or activated with the keyboard without being dragged.

ref

{ drop, shake, pop }

—

drop() replays the entrance, shake(strength?) tosses the whole pile, pop(x, y, strength?) taps the pile at a point in pixels.

className

string

—

Classes for the root element. It fills its parent, with a 360px minimum height.

style

CSSProperties

—

Inline styles for the root element.