Documentation

Documentation Components

Voxels

Rebuild any shape out of voxels — a flat shape becomes chunky pixel art, a 3D shape a lit voxel model with smooth ambient occlusion, cast shadows, a key light you can orbit or drive, and per-cube colour

Props

originstring
Default:center
Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.
center{x: number, y: number}
Default:{"x":0.5,"y":0.5}
Center position of the voxel model
scalenumber
Default:1
Scale of the voxel model (1 = default size)
rotationnumber
Default:0
Rotation of the voxel model in degrees
voxelSizenumber
Default:0.035
Edge length of one voxel relative to the shape field — small for fine detail, large for chunky blocks
voxelShape"cube" | "rounded" | "sphere"
Default:cube
What each cell is built from: hard cubes, rounded cubes (see Bevel) or spheres
voxelScalenumber
Default:1
Size of each voxel inside its cell — 1 = touching neighbours, lower opens gaps between the blocks
fillnumber
Default:0
How eagerly cells fill in along the surface — negative carves a thinner model, positive puffs it out
bevelnumber
Default:0.08
Edge rounding of each voxel as a fraction of its size — a hairline chamfer catching light on cubes, the corner radius of rounded cubes
depthnumber
Default:0.12
Thickness given to flat shapes (2D shapes and flat SVGs) so they become a slab of voxels — 3D shapes ignore it
gridSpace"shape" | "view"
Default:shape
Model: the grid rotates with the shape like a built voxel model. Screen: the grid is fixed to the canvas and the shape moves through it like a 3D pixelation
colorAstring
Default:#6ea8ff
Base colour of the voxels (the first colour of the palette mode)
colorBstring
Default:#1d2b4f
Second palette colour — blended in by height, depth, per voxel or on the side faces
colorMode"solid" | "height" | "depth" | "random" | "faces"
Default:height
How the two colours are laid over the model: one solid colour, a gradient by height or depth, a random pick per voxel, or Color A on top faces and Color B on the sides
colorVariationnumber
Default:0.25
Per-voxel tonal jitter — the slightly-off shades that make blocks read as individual bricks
colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
Default:oklab
Color space for color interpolation
lightAnglenumber
Default:225
Direction the key light comes from, in degrees around the canvas — shadows fall away from it
lightElevationnumber
Default:42
How high the key light sits above the canvas — low for long raking shadows, high for a flat top-down light
lightColorstring
Default:#fff2df
Colour of the key light
lightIntensitynumber
Default:1.1
Strength of the key light
ambientColorstring
Default:#9fb4d8
Sky colour of the ambient light — the fill on faces the key light misses
ambientnumber
Default:0.55
Strength of the ambient sky/ground fill
shadowsnumber
Default:0.85
Darkness of the shadows voxels cast onto each other
shadowSoftnessnumber
Default:0.35
Penumbra of the cast shadows — 0 is razor sharp, higher spreads the light into a soft area source whose shadows sharpen at contact
aonumber
Default:1
Ambient occlusion in the creases between voxels — the soft contact darkening that sells the geometry
glossinessnumber
Default:0.35
How tight the specular highlight is — satin plastic at 0, lacquered at 1
specularnumber
Default:0.6
Strength of the specular highlight and the fresnel rim on grazing faces
seamsnumber
Default:0.2
Dark seam lines along every voxel edge — 0 for seamless blocks, higher for a drawn-outline brick look
shapeShapeConfig
Default:sphere3D
Shape to render — choose from 11 built-in analytical shapes or supply a custom SDF. See the Shape Effects guide for all available shapes and their options.
shapeSdfUrlstring
Default:""
URL to a pre-generated SDF `.bin` file — when non-empty, activates SVG mode and triggers a shader recompile. See the Shape Effects guide for how to generate an SDF from an SVG.

Usage

<Shader>
  <Voxels />
</Shader>
Previous
Voronoi
Next
Water