LightEdge

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

Props

  • origin

    Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.

    Type
    string
    Default
    center

  • center

    Center position of the shape

    Type
    {x: number, y: number}
    Default
    {"x":0.5,"y":0.5}

  • scale

    Scale of the shape (1 = default size)

    Type
    number
    Default
    1

  • rotation

    Rotation of the shape in degrees

    Type
    number
    Default
    0

  • colorA

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

    Type
    string
    Default
    #7b2ff7

  • colorB

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

    Type
    string
    Default
    #00e0ff

  • stops

    Multi-stop gradient colors (overrides Color A / Color B when set)

    Type
    object
    Default
    [{"color":"#7b2ff7","position":0},{"color":"#00e0ff","position":0.5},{"color":"#ff3d81","position":1}]

  • colorSpace

    Color space overlapping lights blend in

    Type
    "linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"
    Default
    linear

  • thickness

    Width of the border band

    Type
    number
    Default
    0.25

  • softness

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

    Type
    number
    Default
    0.5

  • intensity

    Brightness of the individual light spots

    Type
    number
    Default
    0.6

  • bloom

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

    Type
    number
    Default
    0.3

  • spots

    Number of light spots orbiting per color

    Type
    number
    Default
    3

  • spotSize

    Angular size of each light spot

    Type
    number
    Default
    0.5

  • pulse

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

    Type
    number
    Default
    0

  • smoke

    Noisy luminous smoke drifting along the border

    Type
    number
    Default
    0.3

  • smokeSize

    Scale of the smoke billows

    Type
    number
    Default
    0.5

  • speed

    Animation speed. 0 pauses.

    Type
    number
    Default
    1

  • seed

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

    Type
    number
    Default
    0

  • shape

    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.

    Type
    ShapeConfig
    Default
    sphere3D

  • shapeSdfUrl

    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.

    Type
    string
    Default
    ""

Usage

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