Documentation

Documentation Components

Irradiance

Photorealistic light spilling around the edge of any 2D, SVG, or 3D shape — any number of movable coloured point lights strike the silhouette and the lit edges irradiate their surroundings, gathered in a compute pass with real cast shadows, mixing where they meet and burning to white at the rim

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 shape
scalenumber
Default:1
Scale of the shape (1 = default size)
rotationnumber
Default:0
Rotation of the shape in degrees
lightsArray<{position: {x: number, y: number}, color: string, intensity: number}>
Default:[{"position":{"x":0.3,"y":0.3},"color":"#ffb347","intensity":3},{"position":{"x":0.72,"y":0.7},"color":"#7a5cff","intensity":2}]
The point lights striking the shape — each with its own position, colour and brightness
lightHeightnumber
Default:0.5
Height of the lights above the shape plane, relative to the shape — low lights graze the body, high lights flood it evenly
lightRangenumber
Default:1.2
Reach of each light — the distance at which it has fallen to half strength, relative to the shape
reachnumber
Default:3
How far from the shape the spilled light is gathered, relative to the shape — the glow fades out toward this distance
corenumber
Default:1
The lit edge seen directly — the white-hot line along the rim where the lights strike
wrapnumber
Default:0.1
How far light wraps around edges that face away from it — 0 leaves the far side dark
shadowsboolean
Default:true
Cast shadows — the body blocks each light from edges it stands in front of (keeps holes and concave pockets dark)
shadowSoftnessnumber
Default:0.15
Penumbra width of the cast shadows — 0 is razor sharp
bodyColorstring
Default:#000000
Color of the shape itself — black for a pure occluder, lighter to see the lights land on its form
bodyLightnumber
Default:0.6
How much the lights illuminate the body — the bevel of a flat shape or the form of a 3D one
bevelWidthnumber
Default:0.01
Width of the rounded edge a flat shape catches the light on, relative to the shape
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>
  <Irradiance />
</Shader>
Previous
IrisWipe
Next
IsometricCubes