Stone

Applies a marbled stone relief and surface distortion to child content

Props

intensitynumber

Default:0.5

Strength of the relief shading applied to the child content

intensity

numberDefault: 0.5

Strength of the relief shading applied to the child content

scalenumber

Default:1

Scale of the pattern — lower = larger features, higher = finer grain

scale

numberDefault: 1

Scale of the pattern — lower = larger features, higher = finer grain

contrastnumber

Default:0

Contrast of the texture — negative flattens it into a subtle overlay

contrast

numberDefault: 0

Contrast of the texture — negative flattens it into a subtle overlay

distortionnumber

Default:0.15

Surface distortion — warps the child along the texture like carved relief

distortion

numberDefault: 0.15

Surface distortion — warps the child along the texture like carved relief

seednumber

Default:0

Random seed for pattern variation

seed

numberDefault: 0

Random seed for pattern variation

Usage

<Shader>
  <Stone
    :intensity="0.5"
  >
    <Circle />
  </Stone>
</Shader>

<Shader>
  <Stone
    intensity={0.5}
  >
    <Circle />
  </Stone>
</Shader>

<Shader>
  <Stone
    intensity={0.5}
  >
    <Circle />
  </Stone>
</Shader>

<Shader>
  <Stone
    intensity={0.5}
  >
    <Circle />
  </Stone>
</Shader>

import { createShader } from 'shaders/js'

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

Star

Strands