Depth Image

A photo relit with depth by a light that follows the cursor

depth-image-tw

Customize

Image URL

Depth From Light

0.50

Depth Smoothing

7.0

Depth Contrast

1.2

Invert Depth

Displacement

1.50

Normal Strength

1.50

Detail

0.80

Shadow Intensity

0.70

Shadow Softness

0.100

Light Color

Light Intensity

6.0

Falloff

2.50

Elevation

1.20

Ambient

0.02

Ambient Color

Background

Color Preserve

0.00

0.12

Auto Orbit

Orbit Radius

0.60

Orbit Duration

10.0s

Props

Name	Type	Default	Description
`image`	string	`—`	Photo to relight.
`depthMap`	string	`—`	Optional real depth map, white near and black far. When omitted one is estimated from the photo.
`fit`	"cover" \| "contain"	`"cover"`	How the photo fills the container.
`depthFromLight`	number	`0.5`	Estimated depth: 0 reads depth from vertical position only, 1 from brightness only.
`depthSmoothing`	number	`7`	Blur applied to the height field, in steps of five texels of a 512 wide map. Applies to supplied depth maps too.
`depthContrast`	number	`1.2`	Estimated depth: contrast applied to the estimate.
`invertDepth`	boolean	`false`	Flip near and far.
`displacement`	number	`1.5`	Height of the relief in scene units; the plane is 2 tall.
`normalStrength`	number	`1.5`	Strength of the large scale surface tilt from depth.
`detail`	number	`0.8`	Strength of fine surface detail read from the photo.
`shadowIntensity`	number	`0.7`	Darkness of self cast shadows, 0 disables them.
`shadowSoftness`	number	`0.1`	Penumbra width of the shadows.
`lightColor`	string	`"#ffffff"`	Light colour.
`lightIntensity`	number	`6`	Light brightness.
`falloff`	number	`2.5`	How quickly the light fades with distance, 0 is even, 4 is a tight pool.
`elevation`	number	`1.2`	Height of the light above the surface.
`ambient`	number	`0.02`	Flat fill light applied everywhere.
`ambientColor`	string	`"#ffffff"`	Colour of the fill light.
`colorPreserve`	number	`0`	How much of the photo's own tone survives in unlit areas, 0 to 1.
`follow`	number	`0.12`	How quickly the light follows the pointer, 0 to 1.
`autoOrbit`	boolean	`true`	Move the light on a slow circle when the pointer is away.
`orbitRadius`	number	`0.6`	Radius of the idle orbit, 0 to 1.
`orbitDuration`	number	`10`	Seconds per idle orbit.
`view`	"lit" \| "depth" \| "normal"	`"lit"`	Debug view of the estimated depth or the normals.
`backgroundColor`	string	`"#000000"`	Floor colour of the unlit surface, so shadows settle on the page colour rather than pure black.
`fallbackColor`	string	`"#171717"`	Colour shown while the photo loads or if it fails.
`paused`	boolean	`false`	Freeze the light.
`dpr`	number	`1.5`	Render scale cap.
`className`	string	`—`	Extra classes for the container.
`children`	ReactNode	`—`	Content layered above the canvas.

imagestring

Photo to relight.

Default—

depthMapstring

Optional real depth map, white near and black far. When omitted one is estimated from the photo.

Default—

fit"cover" | "contain"

How the photo fills the container.

Default"cover"

depthFromLightnumber

Estimated depth: 0 reads depth from vertical position only, 1 from brightness only.

Default0.5

depthSmoothingnumber

Blur applied to the height field, in steps of five texels of a 512 wide map. Applies to supplied depth maps too.

Default7

depthContrastnumber

Estimated depth: contrast applied to the estimate.

Default1.2

invertDepthboolean

Flip near and far.

Defaultfalse

displacementnumber

Height of the relief in scene units; the plane is 2 tall.

Default1.5

normalStrengthnumber

Strength of the large scale surface tilt from depth.

Default1.5

detailnumber

Strength of fine surface detail read from the photo.

Default0.8

shadowIntensitynumber

Darkness of self cast shadows, 0 disables them.

Default0.7

shadowSoftnessnumber

Penumbra width of the shadows.

Default0.1

lightColorstring

Light colour.

Default"#ffffff"

lightIntensitynumber

Light brightness.

Default6

falloffnumber

How quickly the light fades with distance, 0 is even, 4 is a tight pool.

Default2.5

elevationnumber

Height of the light above the surface.

Default1.2

ambientnumber

Flat fill light applied everywhere.

Default0.02

ambientColorstring

Colour of the fill light.

Default"#ffffff"

colorPreservenumber

How much of the photo's own tone survives in unlit areas, 0 to 1.

Default0

follownumber

How quickly the light follows the pointer, 0 to 1.

Default0.12

autoOrbitboolean

Move the light on a slow circle when the pointer is away.

Defaulttrue

orbitRadiusnumber

Radius of the idle orbit, 0 to 1.

Default0.6

orbitDurationnumber

Seconds per idle orbit.

Default10

view"lit" | "depth" | "normal"

Debug view of the estimated depth or the normals.

Default"lit"

backgroundColorstring

Floor colour of the unlit surface, so shadows settle on the page colour rather than pure black.

Default"#000000"

fallbackColorstring

Colour shown while the photo loads or if it fails.

Default"#171717"

pausedboolean

Freeze the light.

Defaultfalse

dprnumber

Render scale cap.

Default1.5

classNamestring

Extra classes for the container.

Default—

childrenReactNode

Content layered above the canvas.

Default—

Name

Type

Default

Description

image

string

—

Photo to relight.

depthMap

string

—

Optional real depth map, white near and black far. When omitted one is estimated from the photo.

fit

"cover" | "contain"

"cover"

How the photo fills the container.

depthFromLight

number

0.5

Estimated depth: 0 reads depth from vertical position only, 1 from brightness only.

depthSmoothing

number

7

Blur applied to the height field, in steps of five texels of a 512 wide map. Applies to supplied depth maps too.

depthContrast

number

1.2

Estimated depth: contrast applied to the estimate.

invertDepth

boolean

false

Flip near and far.

displacement

number

1.5

Height of the relief in scene units; the plane is 2 tall.

normalStrength

number

1.5

Strength of the large scale surface tilt from depth.

detail

number

0.8

Strength of fine surface detail read from the photo.

shadowIntensity

number

0.7

Darkness of self cast shadows, 0 disables them.

shadowSoftness

number

0.1

Penumbra width of the shadows.

lightColor

string

"#ffffff"

Light colour.

lightIntensity

number

6

Light brightness.

falloff

number

2.5

How quickly the light fades with distance, 0 is even, 4 is a tight pool.

elevation

number

1.2

Height of the light above the surface.

ambient

number

0.02

Flat fill light applied everywhere.

ambientColor

string

"#ffffff"

Colour of the fill light.

colorPreserve

number

0

How much of the photo's own tone survives in unlit areas, 0 to 1.

follow

number

0.12

How quickly the light follows the pointer, 0 to 1.

autoOrbit

boolean

true

Move the light on a slow circle when the pointer is away.

orbitRadius

number

0.6

Radius of the idle orbit, 0 to 1.

orbitDuration

number

10

Seconds per idle orbit.

view

"lit" | "depth" | "normal"

"lit"

Debug view of the estimated depth or the normals.

backgroundColor

string

"#000000"

Floor colour of the unlit surface, so shadows settle on the page colour rather than pure black.

fallbackColor

string

"#171717"

Colour shown while the photo loads or if it fails.

paused

boolean

false

Freeze the light.

dpr

number

1.5

Render scale cap.

className

string

—

Extra classes for the container.

children

ReactNode

—

Content layered above the canvas.