PagePeel

Curl the content up from a corner like a peeling page

Props

corner"top-left" | "top-right" | "bottom-left" | "bottom-right"

Default:bottom-right

Which corner the page peels from

corner

"top-left" | "top-right" | "bottom-left" | "bottom-right"Default: bottom-right

Which corner the page peels from

amountnumber

Default:0.2

How far the peel has progressed across the page (0 = flat, 1 = fully peeled)

amount

numberDefault: 0.2

How far the peel has progressed across the page (0 = flat, 1 = fully peeled)

radiusnumber

Default:0.2

Tightness of the curl (fraction of the page diagonal)

radius

numberDefault: 0.2

Tightness of the curl (fraction of the page diagonal)

shadingnumber

Default:0.55

How much the underside of the curl is shaded for depth

shading

numberDefault: 0.55

How much the underside of the curl is shaded for depth

highlightnumber

Default:0.4

Strength of the specular sheen running along the curl

highlight

numberDefault: 0.4

Strength of the specular sheen running along the curl

highlightSoftnessnumber

Default:0.2

Width of the specular highlight band (low = tight gloss, high = broad satin)

highlightSoftness

numberDefault: 0.2

Width of the specular highlight band (low = tight gloss, high = broad satin)

shadownumber

Default:1

Strength of the contact shadow the curl casts on the page

shadow

numberDefault: 1

Strength of the contact shadow the curl casts on the page

Usage

<Shader>
  <PagePeel
    :radius="0.2"
  >
    <Circle />
  </PagePeel>
</Shader>

<Shader>
  <PagePeel
    radius={0.2}
  >
    <Circle />
  </PagePeel>
</Shader>

<Shader>
  <PagePeel
    radius={0.2}
  >
    <Circle />
  </PagePeel>
</Shader>

<Shader>
  <PagePeel
    radius={0.2}
  >
    <Circle />
  </PagePeel>
</Shader>

import { createShader } from 'shaders/js'

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

ObjectTracker

Paper