Pond Image

A photo you can stir like liquid

pond-image-tw

Customize

Highlight

Brush Size

60px

Force

1.00

Swirl

0.35

Flow

0.45s

Settle Time

1.1s

Gloss

0.40

Shade

0.40

Chromatic

0.30

Autoplay Speed

1.00

Idle Delay

2.00s

HoverClick BurstAutoplay

Props

Name	Type	Default	Description
`src`	string	`Koi pond`	Image to stir. It is cropped to cover the component.
`alt`	string	`"Orange-and-black koi beneath green lily pads on a reflective pond"`	Accessible description of the image.
`aspectRatio`	number	`4 / 3`	Width divided by height. 0 fills the parent's height instead.
`radius`	number	`16`	Corner radius in pixels.
`brushSize`	number	`60`	Radius in pixels of the liquid the pointer drags along.
`force`	number	`1`	How hard the pointer pushes the liquid. Faster moves push harder.
`swirl`	number	`0.35`	How much the flow curls into eddies, from 0 (smooth smears) to 1 (marbled whirls).
`flow`	number	`0.45`	Seconds for the liquid to lose half its speed once the pointer stops.
`settleTime`	number	`1.1`	How quickly the image flows back into place, in seconds. Longer values leave the swirls on show.
`gloss`	number	`0.4`	Wet highlight on the moving liquid, from 0 to 2.
`shade`	number	`0.4`	Darkening where the liquid bunches up and lightening where it thins out, from 0 to 1.
`chromatic`	number	`0.3`	Colour fringing where the image is pulled furthest, from 0 to 1.
`highlightColor`	string	`"#FFFFFF"`	Colour of the wet highlight.
`quality`	number	`1`	Detail of the fluid simulation, from 0.25 to 2. Lower values are cheaper and give broader swirls.
`hover`	boolean	`true`	Stir the liquid as the pointer moves over it. On touch screens, horizontal swipes stir and vertical swipes scroll.
`clickBurst`	boolean	`true`	Clicking, tapping or pressing Enter pushes the liquid outward from that point.
`autoplay`	boolean	`false`	While nobody is interacting, a slow stir wanders across the image.
`autoplaySpeed`	number	`1`	Speed of that stir.
`idleDelay`	number	`2`	Seconds after the pointer leaves before autoplay resumes.
`ref`	{ stir, burst, settle }	`—`	stir(x, y, dx, dy) pushes the liquid at a point with a velocity in pixels per second. burst(x, y) pushes outward. settle() snaps the image back at once.
`className`	string	`—`	Classes for the root element, which fills its parent's width.
`style`	CSSProperties	`—`	Inline styles for the root element.

srcstring

Image to stir. It is cropped to cover the component.

DefaultKoi pond

altstring

Accessible description of the image.

Default"Orange-and-black koi beneath green lily pads on a reflective pond"

aspectRationumber

Width divided by height. 0 fills the parent's height instead.

Default4 / 3

radiusnumber

Corner radius in pixels.

Default16

brushSizenumber

Radius in pixels of the liquid the pointer drags along.

Default60

forcenumber

How hard the pointer pushes the liquid. Faster moves push harder.

Default1

swirlnumber

How much the flow curls into eddies, from 0 (smooth smears) to 1 (marbled whirls).

Default0.35

flownumber

Seconds for the liquid to lose half its speed once the pointer stops.

Default0.45

settleTimenumber

How quickly the image flows back into place, in seconds. Longer values leave the swirls on show.

Default1.1

glossnumber

Wet highlight on the moving liquid, from 0 to 2.

Default0.4

shadenumber

Darkening where the liquid bunches up and lightening where it thins out, from 0 to 1.

Default0.4

chromaticnumber

Colour fringing where the image is pulled furthest, from 0 to 1.

Default0.3

highlightColorstring

Colour of the wet highlight.

Default"#FFFFFF"

qualitynumber

Detail of the fluid simulation, from 0.25 to 2. Lower values are cheaper and give broader swirls.

Default1

hoverboolean

Stir the liquid as the pointer moves over it. On touch screens, horizontal swipes stir and vertical swipes scroll.

Defaulttrue

clickBurstboolean

Clicking, tapping or pressing Enter pushes the liquid outward from that point.

Defaulttrue

autoplayboolean

While nobody is interacting, a slow stir wanders across the image.

Defaultfalse

autoplaySpeednumber

Speed of that stir.

Default1

idleDelaynumber

Seconds after the pointer leaves before autoplay resumes.

Default2

ref{ stir, burst, settle }

stir(x, y, dx, dy) pushes the liquid at a point with a velocity in pixels per second. burst(x, y) pushes outward. settle() snaps the image back at once.

Default—

classNamestring

Classes for the root element, which fills its parent's width.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

src

string

Koi pond

Image to stir. It is cropped to cover the component.

alt

string

"Orange-and-black koi beneath green lily pads on a reflective pond"

Accessible description of the image.

aspectRatio

number

4 / 3

Width divided by height. 0 fills the parent's height instead.

radius

number

16

Corner radius in pixels.

brushSize

number

60

Radius in pixels of the liquid the pointer drags along.

force

number

1

How hard the pointer pushes the liquid. Faster moves push harder.

swirl

number

0.35

How much the flow curls into eddies, from 0 (smooth smears) to 1 (marbled whirls).

flow

number

0.45

Seconds for the liquid to lose half its speed once the pointer stops.

settleTime

number

1.1

How quickly the image flows back into place, in seconds. Longer values leave the swirls on show.

gloss

number

0.4

Wet highlight on the moving liquid, from 0 to 2.

shade

number

0.4

Darkening where the liquid bunches up and lightening where it thins out, from 0 to 1.

chromatic

number

0.3

Colour fringing where the image is pulled furthest, from 0 to 1.

highlightColor

string

"#FFFFFF"

Colour of the wet highlight.

quality

number

1

Detail of the fluid simulation, from 0.25 to 2. Lower values are cheaper and give broader swirls.

hover

boolean

true

Stir the liquid as the pointer moves over it. On touch screens, horizontal swipes stir and vertical swipes scroll.

clickBurst

boolean

true

Clicking, tapping or pressing Enter pushes the liquid outward from that point.

autoplay

boolean

false

While nobody is interacting, a slow stir wanders across the image.

autoplaySpeed

number

1

Speed of that stir.

idleDelay

number

2

Seconds after the pointer leaves before autoplay resumes.

ref

{ stir, burst, settle }

—

stir(x, y, dx, dy) pushes the liquid at a point with a velocity in pixels per second. burst(x, y) pushes outward. settle() snaps the image back at once.

className

string

—

Classes for the root element, which fills its parent's width.

style

CSSProperties

—

Inline styles for the root element.