PagePeel

Curl the content up from a corner like a peeling page

Props

  • corner

    Which corner the page peels from

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

  • amount

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

    Type
    number
    Default
    0.2

  • radius

    Tightness of the curl (fraction of the page diagonal)

    Type
    number
    Default
    0.2

  • shading

    How much the underside of the curl is shaded for depth

    Type
    number
    Default
    0.55

  • highlight

    Strength of the specular sheen running along the curl

    Type
    number
    Default
    0.4

  • highlightSoftness

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

    Type
    number
    Default
    0.2

  • shadow

    Strength of the contact shadow the curl casts on the page

    Type
    number
    Default
    1

Usage

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