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

See what's new

Documentation

Documentation Components

BrushedMetal

Photorealistic brushed metal — a satin anodised surface combed with fine directional grain that smears the reflected studio and key light into the long anisotropic streaks of real brushed aluminium, steel, gold or copper

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 metal shape
scalenumber
Default:1
Scale of the metal shape (1 = default size)
rotationnumber
Default:0
Rotation of the metal shape in degrees
lightColorstring
Default:#e9ebef
The bright tone of the polished grain — recolor for gold (#ffe8b0), copper (#ffc8a0) or steel
darkColorstring
Default:#26282d
The dark tone the brushed grain falls to in shadow. Tint it warm for gold/bronze, cool for steel.
brushAnglenumber
Default:0
Direction the surface is brushed, in degrees — the grain and every reflection streak run along this axis
anisotropynumber
Default:0.4
How directional the brushing is — 1 = long smeared streaks along the grain, 0 = isotropic satin with no direction
grainnumber
Default:0.4
Depth of the individual brush scratches — the fine satin texture combed into the metal
grainScalenumber
Default:2
Density of the brush lines — higher = finer, tighter scratches
roughnessnumber
Default:0.5
Overall satin softness — 0 = near-polished with crisp reflections, 1 = soft matte brushed finish
environmentnumber
Default:1.4
Strength of the reflected studio lighting — the softboxes seen smeared across the metal
envRotationnumber
Default:0
Rotates the whole reflected studio — spins where the bright reflections fall
lightAnglenumber
Default:215
Direction of the key light for the anisotropic specular streak, in degrees
speednumber
Default:0.4
Speed of the slowly drifting reflection — the studio gently orbits the surface. 0 pauses.
edgeSoftnessnumber
Default:0.05
Softness of the shape boundary edge
shapeShapeConfig
Default:circleSDF
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>
  <BrushedMetal />
</Shader>
Previous
BrightnessContrast
Next
Bulge