GlassTiles

Refraction-like distortion in a tile grid pattern

Props

intensitynumber

Default:2

The intensity of the glass tiles effect

intensity

numberDefault: 2

The intensity of the glass tiles effect

tileCountnumber

Default:20

Number of tiles across the longest dimension

tileCount

numberDefault: 20

Number of tiles across the longest dimension

rotationnumber

Default:0

Rotation angle of the tile grid in degrees

rotation

numberDefault: 0

Rotation angle of the tile grid in degrees

roundnessnumber

Default:0

Makes tiles more circular instead of square

roundness

numberDefault: 0

Makes tiles more circular instead of square

Usage

<Shader>
  <GlassTiles
    :intensity="2"
  >
    <Circle />
  </GlassTiles>
</Shader>

<Shader>
  <GlassTiles
    intensity={2}
  >
    <Circle />
  </GlassTiles>
</Shader>

<Shader>
  <GlassTiles
    intensity={2}
  >
    <Circle />
  </GlassTiles>
</Shader>

<Shader>
  <GlassTiles
    intensity={2}
  >
    <Circle />
  </GlassTiles>
</Shader>

import { createShader } from 'shaders/js'

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

Glass

Glitch

Documentation

GlassTiles

Props

Usage