Bend

Bends the ends of the frame toward you like a curved display — content at the edges swells closer under real perspective, or curls away when the strength goes negative

Props

strengthnumber

Default:0.5

How hard the ends bend — positive curls them toward you (edges magnify), negative curls them away (edges recede into the frame)

strength

numberDefault: 0.5

How hard the ends bend — positive curls them toward you (edges magnify), negative curls them away (edges recede into the frame)

falloffnumber

Default:0

Concentrates the bend toward the ends — 0 curves the whole frame, higher keeps the middle flat and bends only near the edges

falloff

numberDefault: 0

Concentrates the bend toward the ends — 0 curves the whole frame, higher keeps the middle flat and bends only near the edges

anglenumber

Default:0

Direction of the bend axis in degrees — 0 bends the left/right ends, 90 bends the top/bottom

angle

numberDefault: 0

Direction of the bend axis in degrees — 0 bends the left/right ends, 90 bends the top/bottom

edges"stretch" | "transparent" | "mirror" | "wrap"

Default:transparent

How to handle edges when the bend pulls content away from the frame border

edges

"stretch" | "transparent" | "mirror" | "wrap"Default: transparent

How to handle edges when the bend pulls content away from the frame border

Usage

<Shader>
  <Bend>
    <Circle />
  </Bend>
</Shader>

<Shader>
  <Bend>
    <Circle />
  </Bend>
</Shader>

<Shader>
  <Bend>
    <Circle />
  </Bend>
</Shader>

<Shader>
  <Bend>
    <Circle />
  </Bend>
</Shader>

import { createShader } from 'shaders/js'

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

Beam

Blob