Chalkboard

Renders content as a chalk drawing on a blackboard, with edge strokes and cross-hatch shading

Props

boardColorstring

Default:#000000

Background board color

boardColor

stringDefault: #000000

Background board color

chalkColorstring

Default:#eceadb

Chalk stroke color

chalkColor

stringDefault: #eceadb

Chalk stroke color

edgeSensitivitynumber

Default:0.5

How readily edges are detected and drawn as chalk strokes

edgeSensitivity

numberDefault: 0.5

How readily edges are detected and drawn as chalk strokes

edgeThicknessnumber

Default:1.5

Thickness of the chalk outline strokes

edgeThickness

numberDefault: 1.5

Thickness of the chalk outline strokes

shadingnumber

Default:0.05

Amount of cross-hatch shading filling darker regions

shading

numberDefault: 0.05

Amount of cross-hatch shading filling darker regions

hatchScalenumber

Default:16

Spacing of the cross-hatch lines in pixels

hatchScale

numberDefault: 16

Spacing of the cross-hatch lines in pixels

grainnumber

Default:0.45

Chalk dustiness / grain that breaks up the strokes

grain

numberDefault: 0.45

Chalk dustiness / grain that breaks up the strokes

Usage

<Shader>
  <Chalkboard>
    <Circle />
  </Chalkboard>
</Shader>

<Shader>
  <Chalkboard>
    <Circle />
  </Chalkboard>
</Shader>

<Shader>
  <Chalkboard>
    <Circle />
  </Chalkboard>
</Shader>

<Shader>
  <Chalkboard>
    <Circle />
  </Chalkboard>
</Shader>

import { createShader } from 'shaders/js'

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

CarbonFiber

ChannelBlur