Surface3D

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

Props

amplitudenumber

Default:0.3

Wave height

amplitude

numberDefault: 0.3

Wave height

waveType"fractal" | "sine" | "ridge"

Default:fractal

Wave pattern type

waveType

"fractal" | "sine" | "ridge"Default: fractal

Wave pattern type

frequencynumber

Default:1.5

Wave frequency

frequency

numberDefault: 1.5

Wave frequency

octavesnumber

Default:2

Detail octaves

octaves

numberDefault: 2

Detail octaves

seednumber

Default:0

Random seed offset

seed

numberDefault: 0

Random seed offset

speednumber

Default:0.5

Animation speed

speed

numberDefault: 0.5

Animation speed

tiltnumber

Default:35

Camera tilt in degrees

tilt

numberDefault: 35

Camera tilt in degrees

rollnumber

Default:0

Camera roll in degrees

roll

numberDefault: 0

Camera roll in degrees

heightnumber

Default:0

Camera height

height

numberDefault: 0

Camera height

zoomnumber

Default:1

Camera zoom

zoom

numberDefault: 1

Camera zoom

nearCutoffnumber

Default:0

Near fade distance

nearCutoff

numberDefault: 0

Near fade distance

farCutoffnumber

Default:1

Far fade distance

farCutoff

numberDefault: 1

Far fade distance

edgePinningnumber

Default:0

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

edgePinning

numberDefault: 0

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

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

Default:mirror

How to handle content beyond the surface bounds

edges

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

How to handle content beyond the surface bounds

lightingnumber

Default:30

Intensity of lighting and shading

lighting

numberDefault: 30

Intensity of lighting and shading

glossinessnumber

Default:0

Surface glossiness

glossiness

numberDefault: 0

Surface glossiness

highlightsnumber

Default:15

Specular highlight intensity

highlights

numberDefault: 15

Specular highlight intensity

lightXnumber

Default:0.4

Light direction X

lightX

numberDefault: 0.4

Light direction X

lightYnumber

Default:-0.6

Light direction Y

lightY

numberDefault: -0.6

Light direction Y

lightZnumber

Default:0.7

Light direction Z

lightZ

numberDefault: 0.7

Light direction Z

lightColorstring

Default:#ffffff

Light color

lightColor

stringDefault: #ffffff

Light color

cursorIntensitynumber

Default:1

Strength of cursor ripples

cursorIntensity

numberDefault: 1

Strength of cursor ripples

cursorSpeednumber

Default:0.5

Speed of cursor ripple propagation

cursorSpeed

numberDefault: 0.5

Speed of cursor ripple propagation

Usage

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

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

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

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

import { createShader } from 'shaders/js'

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

SunBurst

Swirl