CornerPin

Pin each corner of the content to an arbitrary position for a free perspective warp

Props

topLeft{x: number, y: number}

Default:{"x":0,"y":0}

Position of the top-left corner

topLeft

{x: number, y: number}Default: {"x":0,"y":0}

Position of the top-left corner

topRight{x: number, y: number}

Default:{"x":1,"y":0}

Position of the top-right corner

topRight

{x: number, y: number}Default: {"x":1,"y":0}

Position of the top-right corner

bottomLeft{x: number, y: number}

Default:{"x":0,"y":1}

Position of the bottom-left corner

bottomLeft

{x: number, y: number}Default: {"x":0,"y":1}

Position of the bottom-left corner

bottomRight{x: number, y: number}

Default:{"x":1,"y":1}

Position of the bottom-right corner

bottomRight

{x: number, y: number}Default: {"x":1,"y":1}

Position of the bottom-right corner

amountnumber

Default:1

Blends the warp in and out — 0 returns the content to its original rectangle, 1 fully pins the corners

amount

numberDefault: 1

Blends the warp in and out — 0 returns the content to its original rectangle, 1 fully pins the corners

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

Default:transparent

How to handle areas outside the pinned quad

edges

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

How to handle areas outside the pinned quad

Usage

<Shader>
  <CornerPin>
    <Circle />
  </CornerPin>
</Shader>

<Shader>
  <CornerPin>
    <Circle />
  </CornerPin>
</Shader>

<Shader>
  <CornerPin>
    <Circle />
  </CornerPin>
</Shader>

<Shader>
  <CornerPin>
    <Circle />
  </CornerPin>
</Shader>

import { createShader } from 'shaders/js'

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

ContourLines

Crescent