Pixel Sculpt

An image rebuilt as 3D tiles that ripple under the cursor

pixel-sculpt-tw

Customize

Image URL

Resolution

100

Depth

8.0

Gap

0.05

Interaction Radius

18.0

Interaction Strength

1.00

Click Strength

2.0

InvertRemove Background

Background Tolerance

0.12

Tilt

45°

Scale

1.20

Offset X

0.00

Offset Y

0.00

Rotation

0°

Auto Rotate

Props

Name	Type	Default	Description
`src`	string	`—`	Image the tiles are sculpted from.
`resolution`	number	`72`	Tiles along the image's longer edge, capped at 160.
`depth`	number	`4`	Height of a fully lit tile, in tile widths.
`gap`	number	`0.15`	Space between tiles as a fraction of a cell.
`tileShape`	"square" \| "round" \| "hex"	`"square"`	Footprint of each tile.
`interactionRadius`	number	`6`	Radius of the pointer wave, in tiles.
`interactionStrength`	number	`1`	Amplitude of the pointer wave.
`hoverEffect`	"raise" \| "tilt" \| "separate"	`"raise"`	How tiles respond inside the pointer wave.
`clickEffect`	"pulse" \| "scatter" \| "rebuild" \| "none"	`"pulse"`	What a click on the tiles triggers.
`clickStrength`	number	`1`	Amplitude of the click effect.
`colorMode`	"image" \| "mono" \| "luminance"	`"image"`	Where tile colour comes from.
`baseColor`	string	`"#ffffff"`	Tile colour for the mono and luminance modes.
`backgroundColor`	string	`"transparent"`	Backdrop behind the tiles.
`invert`	boolean	`false`	Make dark pixels tall instead of bright ones.
`removeBackground`	boolean	`false`	Drop a flat backdrop that touches the image edges, as if it were transparent.
`backgroundTolerance`	number	`0.12`	How far a pixel may stray from the backdrop colour and still be removed, 0 to 1.
`tilt`	number	`32`	Camera angle from straight down, in degrees.
`scale`	number	`1`	Zoom relative to the fitted framing, 1 fills the viewport.
`offsetX`	number	`0`	Horizontal shift as a fraction of the sculpture's width.
`offsetY`	number	`0`	Vertical shift as a fraction of the sculpture's height.
`rotation`	number	`0`	Yaw of the sculpture in degrees; auto-rotation spins on top of it.
`autoRotate`	boolean	`false`	Slowly spin the sculpture.
`rotateSpeed`	number	`2`	Rotation speed in turns per minute.
`dpr`	number	`2`	Upper device pixel ratio bound.
`onError`	(error: Error) => void	`undefined`	Called when the image fails to load or sample.
`className`	string	`undefined`	Extra classes applied to the root.
`children`	ReactNode	`undefined`	Content layered above the effect.

srcstring

Image the tiles are sculpted from.

Default—

resolutionnumber

Tiles along the image's longer edge, capped at 160.

Default72

depthnumber

Height of a fully lit tile, in tile widths.

Default4

gapnumber

Space between tiles as a fraction of a cell.

Default0.15

tileShape"square" | "round" | "hex"

Footprint of each tile.

Default"square"

interactionRadiusnumber

Radius of the pointer wave, in tiles.

Default6

interactionStrengthnumber

Amplitude of the pointer wave.

Default1

hoverEffect"raise" | "tilt" | "separate"

How tiles respond inside the pointer wave.

Default"raise"

clickEffect"pulse" | "scatter" | "rebuild" | "none"

What a click on the tiles triggers.

Default"pulse"

clickStrengthnumber

Amplitude of the click effect.

Default1

colorMode"image" | "mono" | "luminance"

Where tile colour comes from.

Default"image"

baseColorstring

Tile colour for the mono and luminance modes.

Default"#ffffff"

backgroundColorstring

Backdrop behind the tiles.

Default"transparent"

invertboolean

Make dark pixels tall instead of bright ones.

Defaultfalse

removeBackgroundboolean

Drop a flat backdrop that touches the image edges, as if it were transparent.

Defaultfalse

backgroundTolerancenumber

How far a pixel may stray from the backdrop colour and still be removed, 0 to 1.

Default0.12

tiltnumber

Camera angle from straight down, in degrees.

Default32

scalenumber

Zoom relative to the fitted framing, 1 fills the viewport.

Default1

offsetXnumber

Horizontal shift as a fraction of the sculpture's width.

Default0

offsetYnumber

Vertical shift as a fraction of the sculpture's height.

Default0

rotationnumber

Yaw of the sculpture in degrees; auto-rotation spins on top of it.

Default0

autoRotateboolean

Slowly spin the sculpture.

Defaultfalse

rotateSpeednumber

Rotation speed in turns per minute.

Default2

dprnumber

Upper device pixel ratio bound.

Default2

onError(error: Error) => void

Called when the image fails to load or sample.

Defaultundefined

classNamestring

Extra classes applied to the root.

Defaultundefined

childrenReactNode

Content layered above the effect.

Defaultundefined

Name

Type

Default

Description

src

string

—

Image the tiles are sculpted from.

resolution

number

72

Tiles along the image's longer edge, capped at 160.

depth

number

4

Height of a fully lit tile, in tile widths.

gap

number

0.15

Space between tiles as a fraction of a cell.

tileShape

"square" | "round" | "hex"

"square"

Footprint of each tile.

interactionRadius

number

6

Radius of the pointer wave, in tiles.

interactionStrength

number

1

Amplitude of the pointer wave.

hoverEffect

"raise" | "tilt" | "separate"

"raise"

How tiles respond inside the pointer wave.

clickEffect

"pulse" | "scatter" | "rebuild" | "none"

"pulse"

What a click on the tiles triggers.

clickStrength

number

1

Amplitude of the click effect.

colorMode

"image" | "mono" | "luminance"

"image"

Where tile colour comes from.

baseColor

string

"#ffffff"

Tile colour for the mono and luminance modes.

backgroundColor

string

"transparent"

Backdrop behind the tiles.

invert

boolean

false

Make dark pixels tall instead of bright ones.

removeBackground

boolean

false

Drop a flat backdrop that touches the image edges, as if it were transparent.

backgroundTolerance

number

0.12

How far a pixel may stray from the backdrop colour and still be removed, 0 to 1.

tilt

number

32

Camera angle from straight down, in degrees.

scale

number

1

Zoom relative to the fitted framing, 1 fills the viewport.

offsetX

number

0

Horizontal shift as a fraction of the sculpture's width.

offsetY

number

0

Vertical shift as a fraction of the sculpture's height.

rotation

number

0

Yaw of the sculpture in degrees; auto-rotation spins on top of it.

autoRotate

boolean

false

Slowly spin the sculpture.

rotateSpeed

number

2

Rotation speed in turns per minute.

dpr

number

2

Upper device pixel ratio bound.

onError

(error: Error) => void

undefined

Called when the image fails to load or sample.

className

string

undefined

Extra classes applied to the root.

children

ReactNode

undefined

Content layered above the effect.