Introducing v3 — a new editor, faster engine, and more.

See what's new

Documentation

Documentation Components

Chrome

Studio-lit mirror chrome — a precision-machined shape with a controllable polished bevel, softly convex faces and a photographic studio reflected in them: one huge frontal softbox, black flags, and thin warm/cool strip lights that fringe amber and ice-blue exactly where the reflections break

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 chrome shape
scalenumber
Default:1
Scale of the chrome shape (1 = default size)
rotationnumber
Default:0
Rotation of the chrome shape in degrees
tintstring
Default:#ffffff
Metal tint multiplied into the reflection — white for silver chrome, warm ivory for gold, dusky rose for copper
warmColorstring
Default:#ffa94d
Color of the warm strip light hugging the studio horizon — the amber band that fringes the reflections
coolColorstring
Default:#82a7e6
Color of the cool wash below the horizon — the steel-blue zone the darker reflections fall into
bevelWidthnumber
Default:0.028
Width of the polished edge bevel, relative to the shape — thin for machined jewellery edges, wide for soft pillowed metal
bevelShapenumber
Default:0.55
Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee, each catching its own line of light
curvaturenumber
Default:0.5
Convex doming of the faces — sweeps the big soft studio gradients across otherwise flat metal
wavinessnumber
Default:0.15
Pressed-metal imperfection — gently bends the face reflections and wobbles the bevel light lines so the surface reads as real
environmentnumber
Default:1
Exposure of the reflected studio — the overall brilliance of the chrome
envRotationnumber
Default:0
Rotates the whole reflected studio — spins where the softbox, flags and strips fall
softnessnumber
Default:0.3
Softness of the studio edges — 0 = razor polished reflections, 1 = satin diffusion
spectralnumber
Default:0.9
The coloured accent lights: an amber glow hugging the softbox edge and an ice-blue wash below it. 0 = a fully achromatic black-and-white studio.
dispersionnumber
Default:0.3
Prismatic RGB splitting concentrated on the fast-curving bevel — thin rainbow micro-fringes along the edge highlights, distinct from the broad accent lights
shadowsnumber
Default:0.7
Depth of the dark studio reflections — how hard the black side flags and floor crush toward graphite. 0 lifts them to a soft gray studio.
speednumber
Default:0.5
Speed of the studio orbit — the whole lighting environment slowly wanders around the piece, sliding the reflections across faces and edges. 0 freezes it.
edgeSoftnessnumber
Default:0.05
Softness of the shape boundary edge
shapeShapeConfig
Default:roundedRectSDF
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>
  <Chrome />
</Shader>
Previous
ChromaticAberration
Next
Circle