Surface3D

Drapes child content over a 3D wave surface with perspective and lighting

Props

  • amplitude

    Wave height

    Type
    number
    Default
    0.3

  • waveType

    Wave pattern type

    Type
    "fractal" | "sine" | "ridge"
    Default
    fractal

  • frequency

    Wave frequency

    Type
    number
    Default
    1.5

  • octaves

    Detail octaves

    Type
    number
    Default
    2

  • seed

    Random seed offset

    Type
    number
    Default
    0

  • speed

    Animation speed

    Type
    number
    Default
    0.5

  • tilt

    Camera tilt in degrees

    Type
    number
    Default
    35

  • roll

    Camera roll in degrees

    Type
    number
    Default
    0

  • height

    Camera height

    Type
    number
    Default
    0

  • zoom

    Camera zoom

    Type
    number
    Default
    1

  • nearCutoff

    Near fade distance

    Type
    number
    Default
    0

  • farCutoff

    Far fade distance

    Type
    number
    Default
    1

  • edgePinning

    Smoothly flatten the surface at its edges (orthogonal to edge mode)

    Type
    number
    Default
    0

  • edges

    How to handle content beyond the surface bounds

    Type
    "stretch" | "transparent" | "mirror" | "wrap"
    Default
    mirror

  • lighting

    Intensity of lighting and shading

    Type
    number
    Default
    30

  • glossiness

    Surface glossiness

    Type
    number
    Default
    0

  • highlights

    Specular highlight intensity

    Type
    number
    Default
    15

  • lightX

    Light direction X

    Type
    number
    Default
    0.4

  • lightY

    Light direction Y

    Type
    number
    Default
    -0.6

  • lightZ

    Light direction Z

    Type
    number
    Default
    0.7

  • lightColor

    Light color

    Type
    string
    Default
    #ffffff

  • cursorIntensity

    Strength of cursor ripples

    Type
    number
    Default
    1

  • cursorSpeed

    Speed of cursor ripple propagation

    Type
    number
    Default
    0.5

Usage

<Shader>
  <Surface3D>
    <Circle />
  </Surface3D>
</Shader>