Wireframe Ball

A rotating wireframe polyhedron raymarched in a shader

Customize

Detail
0
Stretch
1.28
Zoom
1.00
Speed
1.00
Wobble
0.000
Edge Color
Edge Glow
1.00
Edge Thickness
0.020
Vertex Color
Vertex Size
0.032
Vertex Glow
0.148
Depth Color
Depth Tint
0.00
Depth Fade
0.00
Brightness
1.00
Opacity
1.00
Cursor Tilt
0.35
Spin Friction
0.940
Target FPS
60
DPR
2.0

Props

31
shape"tetrahedron" | "cube" | "octahedron" | "dodecahedron" | "icosahedron"

Base polyhedron the wireframe is built from

Default"icosahedron"
detailnumber

Geodesic subdivision level (0-3). Each step splits every face into four, multiplying vertices and edges

Default0
stretchnumber

Elongation of the icosahedral vertex rings. 1.618 gives a perfectly regular icosahedron

Default1.28
zoomnumber

Scale of the solid within the frame

Default1
speednumber

Rate of the tumbling motion

Default1
wobblenumber

Amount the solid breathes in and out as it turns

Default0
showEdgesboolean

Render the glowing struts between vertices

Defaulttrue
edgeColorstring

Colour of the struts. Defaults to the inherited text colour, so it tracks the page theme automatically

Default"currentColor"
edgeGlownumber

Brightness of the strut glow

Default1
edgeThicknessnumber

Core radius of a strut. Larger values give a wider, softer line

Default0.02
showVerticesboolean

Render the bright dot at each vertex

Defaulttrue
vertexColorstring

Colour of the vertex dots. Defaults to the inherited text colour, so it tracks the page theme automatically

Default"currentColor"
vertexSizenumber

Radius of each vertex dot

Default0.032
vertexGlownumber

Brightness of each vertex dot, scaled by how many struts meet there

Default0.148
depthColorstring

Colour blended into the far side of the solid

Default"#7aa2ff"
depthTintnumber

How strongly depthColor is mixed into the receding side

Default0
depthFadenumber

How much the far side dims, adding a sense of volume

Default0
backgroundColorstring

Backdrop behind the wireframe. Transparent by default so it layers over whatever sits underneath; the glow is additive, so dark backdrops read best

Default"transparent"
brightnessnumber

Overall output gain

Default1
opacitynumber

Opacity of the whole wireframe

Default1
cursorInteractionboolean

Let the pointer tilt the solid as it hovers

Defaulttrue
cursorTiltnumber

Maximum tilt in radians applied by the pointer

Default0.35
dragToSpinboolean

Grab the solid and throw it, with momentum on release

Defaulttrue
spinFrictionnumber

How quickly a thrown spin slows down. Lower stops sooner

Default0.94
adaptiveQualityboolean

Drop render resolution automatically if the frame rate falls short

Defaulttrue
targetFpsnumber

Frame rate adaptive quality aims to hold

Default60
dprnumber

Upper bound on device pixel ratio

Default2
pausedboolean

Freeze the tumble

Defaultfalse
classNamestring

Classes applied to the container

Default""
styleReact.CSSProperties

Inline styles applied to the container

Defaultundefined
childrenReact.ReactNode

Content layered above the wireframe

Defaultundefined