Documentation

Documentation Components

LightEdge

Glowing, pulsing light racing around the edge of any 2D, SVG, or 3D shape. Powered by Paper Shaders.

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
colorAstring
Default:#7b2ff7
First border light color (used when no gradient stops are set)
colorBstring
Default:#00e0ff
Second border light color (used when no gradient stops are set)
stopsobject
Default:[{"color":"#7b2ff7","position":0},{"color":"#00e0ff","position":0.5},{"color":"#ff3d81","position":1}]
Multi-stop gradient colors (overrides Color A / Color B when set)
colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
Default:linear
Color space overlapping lights blend in
thicknessnumber
Default:0.25
Width of the border band
softnessnumber
Default:0.5
Edge softness — 0 = crisp band, 1 = wide smooth gradient
intensitynumber
Default:0.6
Brightness of the individual light spots
bloomnumber
Default:0.3
How additively overlapping lights pile up — high values overdrive to white
spotsnumber
Default:3
Number of light spots orbiting per color
spotSizenumber
Default:0.5
Angular size of each light spot
pulsenumber
Default:0
Heartbeat pulsing — synchronizes the lights to a double-beat rhythm
smokenumber
Default:0.3
Noisy luminous smoke drifting along the border
smokeSizenumber
Default:0.5
Scale of the smoke billows
speednumber
Default:1
Animation speed. 0 pauses.
seednumber
Default:0
Random seed — re-rolls spot speeds, directions and phases
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>
  <LightEdge
    intensity={0.6}
  />
</Shader>
Previous
LensFlare
Next
LightLeak