LightLeak

Photorealistic film light leak — warm overexposed light bleeding in from a draggable anchor point, with streak bands, chromatic fringing, and slow breathing that evolves over time

Props

position{x: number, y: number}

Default:{"x":0.95,"y":0.4}

Anchor point of the leak — the light beams from here toward the canvas centre

position

{x: number, y: number}Default: {"x":0.95,"y":0.4}

Anchor point of the leak — the light beams from here toward the canvas centre

spreadnumber

Default:0.55

How far the light bleeds into the frame

spread

numberDefault: 0.55

How far the light bleeds into the frame

intensitynumber

Default:0.15

Exposure strength of the leak

intensity

numberDefault: 0.15

Exposure strength of the leak

streaksnumber

Default:0.6

Strength of the parallel streak bands further into the frame

streaks

numberDefault: 0.6

Strength of the parallel streak bands further into the frame

colorHotstring

Default:#fff3c4

Core color where the leak is fully overexposed

colorHot

stringDefault: #fff3c4

Core color where the leak is fully overexposed

colorMidstring

Default:#ff7a2f

Main body color of the leak

colorMid

stringDefault: #ff7a2f

Main body color of the leak

colorFringestring

Default:#a63d8f

Outer fringe color where the light fades out

colorFringe

stringDefault: #a63d8f

Outer fringe color where the light fades out

flickernumber

Default:0.35

Breathing of the leak intensity

flicker

numberDefault: 0.35

Breathing of the leak intensity

speednumber

Default:1

Speed of the breathing, drift and evolution. 0 freezes the leak.

speed

numberDefault: 1

Speed of the breathing, drift and evolution. 0 freezes the leak.

seednumber

Default:0

Random seed — re-rolls the drift and breathing pattern

seed

numberDefault: 0

Random seed — re-rolls the drift and breathing pattern

Usage

<Shader>
  <LightLeak
    :intensity="0.15"
  >
    <Circle />
  </LightLeak>
</Shader>

<Shader>
  <LightLeak
    intensity={0.15}
  >
    <Circle />
  </LightLeak>
</Shader>

<Shader>
  <LightLeak
    intensity={0.15}
  >
    <Circle />
  </LightLeak>
</Shader>

<Shader>
  <LightLeak
    intensity={0.15}
  >
    <Circle />
  </LightLeak>
</Shader>

import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'LightLeak', props: { intensity: 0.15 }, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})

LightEdge

LinearBlur