Beam

A beam of light from one point to another.

Props

startPosition{x: number, y: number}

Default:{"x":0.2,"y":0.5}

Starting point of the beam

startPosition

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

Starting point of the beam

endPosition{x: number, y: number}

Default:{"x":0.8,"y":0.5}

Ending point of the beam

endPosition

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

Ending point of the beam

startThicknessnumber

Default:0.2

Thickness at the start of the beam

startThickness

numberDefault: 0.2

Thickness at the start of the beam

endThicknessnumber

Default:0.2

Thickness at the end of the beam

endThickness

numberDefault: 0.2

Thickness at the end of the beam

startSoftnessnumber

Default:0.5

Edge softness at the start of the beam

startSoftness

numberDefault: 0.5

Edge softness at the start of the beam

endSoftnessnumber

Default:0.5

Edge softness at the end of the beam

endSoftness

numberDefault: 0.5

Edge softness at the end of the beam

insideColorstring

Default:#FF0000

Color at the center of the beam

insideColor

stringDefault: #FF0000

Color at the center of the beam

outsideColorstring

Default:#0000FF

Color at the edges of the beam

outsideColor

stringDefault: #0000FF

Color at the edges of the beam

colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

Usage

<Shader>
  <Beam />
</Shader>

<Shader>
  <Beam />
</Shader>

<Shader>
  <Beam />
</Shader>

<Shader>
  <Beam />
</Shader>

import { createShader } from 'shaders/js'

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

Aurora

Blob

Documentation

Beam

Props

Usage