Ripples

Concentric animated ripples emanating from a point

Props

center{x: number, y: number}

Default:{"x":0.5,"y":0.5}

The center point where ripples emanate from

center

{x: number, y: number}Default: {"x":0.5,"y":0.5}

The center point where ripples emanate from

colorAstring

Default:#ffffff

Color of the ripple waves

colorA

stringDefault: #ffffff

Color of the ripple waves

colorBstring

Default:#000000

Background color between ripples

colorB

stringDefault: #000000

Background color between ripples

speednumber

Default:1

Speed of ripple animation

speed

numberDefault: 1

Speed of ripple animation

frequencynumber

Default:20

Number of ripples/spacing between them

frequency

numberDefault: 20

Number of ripples/spacing between them

softnessnumber

Default:0

Softness of ripple edges

softness

numberDefault: 0

Softness of ripple edges

thicknessnumber

Default:0.5

Thickness of each ripple band

thickness

numberDefault: 0.5

Thickness of each ripple band

phasenumber

Default:0

Phase offset for ripple animation

phase

numberDefault: 0

Phase offset for ripple animation

Usage

<Shader>
  <Ripples />
</Shader>

<Shader>
  <Ripples />
</Shader>

<Shader>
  <Ripples />
</Shader>

<Shader>
  <Ripples />
</Shader>

import { createShader } from 'shaders/js'

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

Ring

RoundedRect

Documentation

Ripples

Props

Usage