Pixel Sculpt
An image rebuilt as a relief of instanced tiles that ripple under the pointer
Customize
Props
27| 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. |
srcstringImage the tiles are sculpted from.
—resolutionnumberTiles along the image's longer edge, capped at 160.
72depthnumberHeight of a fully lit tile, in tile widths.
4gapnumberSpace between tiles as a fraction of a cell.
0.15tileShape"square" | "round" | "hex"Footprint of each tile.
"square"interactionRadiusnumberRadius of the pointer wave, in tiles.
6interactionStrengthnumberAmplitude of the pointer wave.
1hoverEffect"raise" | "tilt" | "separate"How tiles respond inside the pointer wave.
"raise"clickEffect"pulse" | "scatter" | "rebuild" | "none"What a click on the tiles triggers.
"pulse"clickStrengthnumberAmplitude of the click effect.
1colorMode"image" | "mono" | "luminance"Where tile colour comes from.
"image"baseColorstringTile colour for the mono and luminance modes.
"#ffffff"backgroundColorstringBackdrop behind the tiles.
"transparent"invertbooleanMake dark pixels tall instead of bright ones.
falseremoveBackgroundbooleanDrop a flat backdrop that touches the image edges, as if it were transparent.
falsebackgroundTolerancenumberHow far a pixel may stray from the backdrop colour and still be removed, 0 to 1.
0.12tiltnumberCamera angle from straight down, in degrees.
32scalenumberZoom relative to the fitted framing, 1 fills the viewport.
1offsetXnumberHorizontal shift as a fraction of the sculpture's width.
0offsetYnumberVertical shift as a fraction of the sculpture's height.
0rotationnumberYaw of the sculpture in degrees; auto-rotation spins on top of it.
0autoRotatebooleanSlowly spin the sculpture.
falserotateSpeednumberRotation speed in turns per minute.
2dprnumberUpper device pixel ratio bound.
2onError(error: Error) => voidCalled when the image fails to load or sample.
undefinedclassNamestringExtra classes applied to the root.
undefinedchildrenReactNodeContent layered above the effect.
undefined