Plasma

Animated effect of glowing plasma

Props

densitynumber

Default:2

Density of the plasma pattern

density

numberDefault: 2

Density of the plasma pattern

speednumber

Default:2

Animation speed

speed

numberDefault: 2

Animation speed

intensitynumber

Default:1.5

Brightness and spread of the plasma glow

intensity

numberDefault: 1.5

Brightness and spread of the plasma glow

warpnumber

Default:0.4

How much the flow distorts and swirls

warp

numberDefault: 0.4

How much the flow distorts and swirls

contrastnumber

Default:1

Push darks darker and lights lighter

contrast

numberDefault: 1

Push darks darker and lights lighter

balancenumber

Default:50

Skew color balance toward A (higher) or B (lower)

balance

numberDefault: 50

Skew color balance toward A (higher) or B (lower)

colorAstring

Default:#7018be

Primary color

colorA

stringDefault: #7018be

Primary color

colorBstring

Default:#000000

Secondary color

colorB

stringDefault: #000000

Secondary color

colorSpace"linear" | "oklch" | "oklab" | "hsl" | "hsv" | "lch"

Default:linear

Color space for color interpolation

colorSpace

Color space for color interpolation

Usage

<Shader>
  <Plasma
    :intensity="1.5"
  />
</Shader>

<Shader>
  <Plasma
    intensity={1.5}
  />
</Shader>

<Shader>
  <Plasma
    intensity={1.5}
  />
</Shader>

<Shader>
  <Plasma
    intensity={1.5}
  />
</Shader>

import { createShader } from 'shaders/js'

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

Pixelate

PolarCoordinates

Documentation

Plasma

Props

Usage