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.

origin

stringDefault: 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

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)

scale

numberDefault: 1

Scale of the shape (1 = default size)

rotationnumber

Default:0

Rotation of the shape in degrees

rotation

numberDefault: 0

Rotation of the shape in degrees

colorAstring

Default:#7b2ff7

First border light color (used when no gradient stops are set)

colorA

stringDefault: #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)

colorB

stringDefault: #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)

stops

objectDefault: [{"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

colorSpace

Color space overlapping lights blend in

thicknessnumber

Default:0.25

Width of the border band

thickness

numberDefault: 0.25

Width of the border band

softnessnumber

Default:0.5

Edge softness — 0 = crisp band, 1 = wide smooth gradient

softness

numberDefault: 0.5

Edge softness — 0 = crisp band, 1 = wide smooth gradient

intensitynumber

Default:0.6

Brightness of the individual light spots

intensity

numberDefault: 0.6

Brightness of the individual light spots

bloomnumber

Default:0.3

How additively overlapping lights pile up — high values overdrive to white

bloom

numberDefault: 0.3

How additively overlapping lights pile up — high values overdrive to white

spotsnumber

Default:3

Number of light spots orbiting per color

spots

numberDefault: 3

Number of light spots orbiting per color

spotSizenumber

Default:0.5

Angular size of each light spot

spotSize

numberDefault: 0.5

Angular size of each light spot

pulsenumber

Default:0

Heartbeat pulsing — synchronizes the lights to a double-beat rhythm

pulse

numberDefault: 0

Heartbeat pulsing — synchronizes the lights to a double-beat rhythm

smokenumber

Default:0.3

Noisy luminous smoke drifting along the border

smoke

numberDefault: 0.3

Noisy luminous smoke drifting along the border

smokeSizenumber

Default:0.5

Scale of the smoke billows

smokeSize

numberDefault: 0.5

Scale of the smoke billows

speednumber

Default:1

Animation speed. 0 pauses.

speed

numberDefault: 1

Animation speed. 0 pauses.

seednumber

Default:0

Random seed — re-rolls spot speeds, directions and phases

seed

numberDefault: 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.

shape

ShapeConfigDefault: 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.

shapeSdfUrl

stringDefault: ""

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>

<Shader>
  <LightEdge
    intensity={0.6}
  />
</Shader>

<Shader>
  <LightEdge
    intensity={0.6}
  />
</Shader>

<Shader>
  <LightEdge
    intensity={0.6}
  />
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'LightEdge', props: { intensity: 0.6 } }
  ]
})

LensFlare

LightLeak