Dappled Light

Sunlight falling through swaying leaves onto a wall

dappled-light-tw

Customize

Light Color

Shadow Color

Background

Scale

1.00

Density

1.00

Depth

0.70

Softness

1.00

Shadow Strength

1.00

Window Angle

28°

Window Size

0.52

Intensity

0.90

Bloom

0.60

Wind

0.60

Wind Speed

1.00

Clouds

0.25

Grain

0.25

Seed

BreezeIntroPaused

Props

Name	Type	Default	Description
`plant`	"ficus" \| "olive" \| "palm" \| "fern"	`"ficus"`	The plant casting the shadows. Each has its own branch structure, leaf shape and way of moving in the wind.
`placement`	"top-right" \| "top-left" \| "right" \| "left" \| "bottom-right" \| "bottom-left"	`"top-right"`	Which edge the plant reaches in from. The rest of the frame stays clear for content.
`scale`	number	`1`	Size of the plant. It scales down automatically on narrow screens.
`density`	number	`1`	How many leaves each branch carries, and how large they are.
`depth`	number	`0.7`	How far apart the branches hang from the wall. Branches farther from the wall cast softer, lighter shadows.
`softness`	number	`1`	Overall softness of the shadows and the window light, like the size of the sun or a hazy sky.
`shadowStrength`	number	`1`	How dark the shadows are on light backgrounds.
`lightColor`	string	`"auto"`	Colour of the light on dark backgrounds. Auto uses a soft violet.
`shadowColor`	string	`"auto"`	Colour of the shadows on light backgrounds. Auto uses a cool lavender grey.
`backgroundColor`	string	`"transparent"`	Background of the component. Light backgrounds get shadows on a sunlit wall; dark backgrounds get light falling into a dark room. Transparent reads the colour behind the component.
`window`	"auto" \| "on" \| "off"	`"auto"`	Frame the light as a window. Auto uses one on dark backgrounds only. Off on a dark background gives a soft pool of light instead.
`windowAngle`	number	`28`	Angle of the window light in degrees.
`windowSize`	number	`0.52`	Size of the window light, relative to the component height.
`intensity`	number	`0.9`	Brightness of the light on dark backgrounds.
`bloom`	number	`0.6`	Soft glow around the light on dark backgrounds.
`wind`	number	`0.6`	Strength of the breeze moving the plant. 0 holds it still.
`windSpeed`	number	`1`	Pace of the breeze.
`clouds`	number	`0.25`	How often a cloud passes and softens the light for a moment.
`breeze`	boolean	`true`	Moving the pointer stirs the plant in the direction of travel; clicking sends a gust through the branches.
`grain`	number	`0.25`	Film grain in the light and shadows. The plain background stays clean.
`seed`	number	`1`	Varies the arrangement of the leaves.
`intro`	boolean	`true`	Bring the light and shadows into focus when the component first appears.
`paused`	boolean	`false`	Stops the breeze. Reduced-motion users get still shadows.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`children`	ReactNode	`—`	Content laid over the light, such as a hero headline. Clicks on its links and buttons never send gusts.
`ref`	{ gust, replay }	`—`	gust(strength?) sends a gust through the plant; replay() replays the intro.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 320px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

plant"ficus" | "olive" | "palm" | "fern"

The plant casting the shadows. Each has its own branch structure, leaf shape and way of moving in the wind.

Default"ficus"

Which edge the plant reaches in from. The rest of the frame stays clear for content.

Default"top-right"

scalenumber

Size of the plant. It scales down automatically on narrow screens.

Default1

densitynumber

How many leaves each branch carries, and how large they are.

Default1

depthnumber

How far apart the branches hang from the wall. Branches farther from the wall cast softer, lighter shadows.

Default0.7

softnessnumber

Overall softness of the shadows and the window light, like the size of the sun or a hazy sky.

Default1

shadowStrengthnumber

How dark the shadows are on light backgrounds.

Default1

lightColorstring

Colour of the light on dark backgrounds. Auto uses a soft violet.

Default"auto"

shadowColorstring

Colour of the shadows on light backgrounds. Auto uses a cool lavender grey.

Default"auto"

backgroundColorstring

Background of the component. Light backgrounds get shadows on a sunlit wall; dark backgrounds get light falling into a dark room. Transparent reads the colour behind the component.

Default"transparent"

window"auto" | "on" | "off"

Frame the light as a window. Auto uses one on dark backgrounds only. Off on a dark background gives a soft pool of light instead.

Default"auto"

windowAnglenumber

Angle of the window light in degrees.

Default28

windowSizenumber

Size of the window light, relative to the component height.

Default0.52

intensitynumber

Brightness of the light on dark backgrounds.

Default0.9

bloomnumber

Soft glow around the light on dark backgrounds.

Default0.6

windnumber

Strength of the breeze moving the plant. 0 holds it still.

Default0.6

windSpeednumber

Pace of the breeze.

Default1

cloudsnumber

How often a cloud passes and softens the light for a moment.

Default0.25

breezeboolean

Moving the pointer stirs the plant in the direction of travel; clicking sends a gust through the branches.

Defaulttrue

grainnumber

Film grain in the light and shadows. The plain background stays clean.

Default0.25

seednumber

Varies the arrangement of the leaves.

Default1

introboolean

Bring the light and shadows into focus when the component first appears.

Defaulttrue

pausedboolean

Stops the breeze. Reduced-motion users get still shadows.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

childrenReactNode

Content laid over the light, such as a hero headline. Clicks on its links and buttons never send gusts.

Default—

ref{ gust, replay }

gust(strength?) sends a gust through the plant; replay() replays the intro.

Default—

classNamestring

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

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

plant

"ficus" | "olive" | "palm" | "fern"

"ficus"

The plant casting the shadows. Each has its own branch structure, leaf shape and way of moving in the wind.

placement

"top-right"

Which edge the plant reaches in from. The rest of the frame stays clear for content.

scale

number

1

Size of the plant. It scales down automatically on narrow screens.

density

number

1

How many leaves each branch carries, and how large they are.

depth

number

0.7

How far apart the branches hang from the wall. Branches farther from the wall cast softer, lighter shadows.

softness

number

1

Overall softness of the shadows and the window light, like the size of the sun or a hazy sky.

shadowStrength

number

1

How dark the shadows are on light backgrounds.

lightColor

string

"auto"

Colour of the light on dark backgrounds. Auto uses a soft violet.

shadowColor

string

"auto"

Colour of the shadows on light backgrounds. Auto uses a cool lavender grey.

backgroundColor

string

"transparent"

Background of the component. Light backgrounds get shadows on a sunlit wall; dark backgrounds get light falling into a dark room. Transparent reads the colour behind the component.

window

"auto" | "on" | "off"

"auto"

Frame the light as a window. Auto uses one on dark backgrounds only. Off on a dark background gives a soft pool of light instead.

windowAngle

number

28

Angle of the window light in degrees.

windowSize

number

0.52

Size of the window light, relative to the component height.

intensity

number

0.9

Brightness of the light on dark backgrounds.

bloom

number

0.6

Soft glow around the light on dark backgrounds.

wind

number

0.6

Strength of the breeze moving the plant. 0 holds it still.

windSpeed

number

1

Pace of the breeze.

clouds

number

0.25

How often a cloud passes and softens the light for a moment.

breeze

boolean

true

Moving the pointer stirs the plant in the direction of travel; clicking sends a gust through the branches.

grain

number

0.25

Film grain in the light and shadows. The plain background stays clean.

seed

number

1

Varies the arrangement of the leaves.

intro

boolean

true

Bring the light and shadows into focus when the component first appears.

paused

boolean

false

Stops the breeze. Reduced-motion users get still shadows.

dpr

number

2

Maximum device pixel ratio for the canvas.

children

ReactNode

—

Content laid over the light, such as a hero headline. Clicks on its links and buttons never send gusts.

ref

{ gust, replay }

—

gust(strength?) sends a gust through the plant; replay() replays the intro.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.