- Docs
- Components
- Backgrounds
- Wireframe Ball
Wireframe Ball
A rotating wireframe polyhedron raymarched in a shader
Customize
Props
31| Name | Type | Default | Description |
|---|---|---|---|
shape | "tetrahedron" | "cube" | "octahedron" | "dodecahedron" | "icosahedron" | "icosahedron" | Base polyhedron the wireframe is built from |
detail | number | 0 | Geodesic subdivision level (0-3). Each step splits every face into four, multiplying vertices and edges |
stretch | number | 1.28 | Elongation of the icosahedral vertex rings. 1.618 gives a perfectly regular icosahedron |
zoom | number | 1 | Scale of the solid within the frame |
speed | number | 1 | Rate of the tumbling motion |
wobble | number | 0 | Amount the solid breathes in and out as it turns |
showEdges | boolean | true | Render the glowing struts between vertices |
edgeColor | string | "currentColor" | Colour of the struts. Defaults to the inherited text colour, so it tracks the page theme automatically |
edgeGlow | number | 1 | Brightness of the strut glow |
edgeThickness | number | 0.02 | Core radius of a strut. Larger values give a wider, softer line |
showVertices | boolean | true | Render the bright dot at each vertex |
vertexColor | string | "currentColor" | Colour of the vertex dots. Defaults to the inherited text colour, so it tracks the page theme automatically |
vertexSize | number | 0.032 | Radius of each vertex dot |
vertexGlow | number | 0.148 | Brightness of each vertex dot, scaled by how many struts meet there |
depthColor | string | "#7aa2ff" | Colour blended into the far side of the solid |
depthTint | number | 0 | How strongly depthColor is mixed into the receding side |
depthFade | number | 0 | How much the far side dims, adding a sense of volume |
backgroundColor | string | "transparent" | Backdrop behind the wireframe. Transparent by default so it layers over whatever sits underneath; the glow is additive, so dark backdrops read best |
brightness | number | 1 | Overall output gain |
opacity | number | 1 | Opacity of the whole wireframe |
cursorInteraction | boolean | true | Let the pointer tilt the solid as it hovers |
cursorTilt | number | 0.35 | Maximum tilt in radians applied by the pointer |
dragToSpin | boolean | true | Grab the solid and throw it, with momentum on release |
spinFriction | number | 0.94 | How quickly a thrown spin slows down. Lower stops sooner |
adaptiveQuality | boolean | true | Drop render resolution automatically if the frame rate falls short |
targetFps | number | 60 | Frame rate adaptive quality aims to hold |
dpr | number | 2 | Upper bound on device pixel ratio |
paused | boolean | false | Freeze the tumble |
className | string | "" | Classes applied to the container |
style | React.CSSProperties | undefined | Inline styles applied to the container |
children | React.ReactNode | undefined | Content layered above the wireframe |
shape"tetrahedron" | "cube" | "octahedron" | "dodecahedron" | "icosahedron"Base polyhedron the wireframe is built from
"icosahedron"detailnumberGeodesic subdivision level (0-3). Each step splits every face into four, multiplying vertices and edges
0stretchnumberElongation of the icosahedral vertex rings. 1.618 gives a perfectly regular icosahedron
1.28zoomnumberScale of the solid within the frame
1speednumberRate of the tumbling motion
1wobblenumberAmount the solid breathes in and out as it turns
0showEdgesbooleanRender the glowing struts between vertices
trueedgeColorstringColour of the struts. Defaults to the inherited text colour, so it tracks the page theme automatically
"currentColor"edgeGlownumberBrightness of the strut glow
1edgeThicknessnumberCore radius of a strut. Larger values give a wider, softer line
0.02showVerticesbooleanRender the bright dot at each vertex
truevertexColorstringColour of the vertex dots. Defaults to the inherited text colour, so it tracks the page theme automatically
"currentColor"vertexSizenumberRadius of each vertex dot
0.032vertexGlownumberBrightness of each vertex dot, scaled by how many struts meet there
0.148depthColorstringColour blended into the far side of the solid
"#7aa2ff"depthTintnumberHow strongly depthColor is mixed into the receding side
0depthFadenumberHow much the far side dims, adding a sense of volume
0backgroundColorstringBackdrop behind the wireframe. Transparent by default so it layers over whatever sits underneath; the glow is additive, so dark backdrops read best
"transparent"brightnessnumberOverall output gain
1opacitynumberOpacity of the whole wireframe
1cursorInteractionbooleanLet the pointer tilt the solid as it hovers
truecursorTiltnumberMaximum tilt in radians applied by the pointer
0.35dragToSpinbooleanGrab the solid and throw it, with momentum on release
truespinFrictionnumberHow quickly a thrown spin slows down. Lower stops sooner
0.94adaptiveQualitybooleanDrop render resolution automatically if the frame rate falls short
truetargetFpsnumberFrame rate adaptive quality aims to hold
60dprnumberUpper bound on device pixel ratio
2pausedbooleanFreeze the tumble
falseclassNamestringClasses applied to the container
""styleReact.CSSPropertiesInline styles applied to the container
undefinedchildrenReact.ReactNodeContent layered above the wireframe
undefined