BarShift

Slices content into parallel bars, each offset independently for a fractured or glitch-like effect

Props

countnumber

Default:6

Number of bars across the longest viewport dimension

count

numberDefault: 6

Number of bars across the longest viewport dimension

anglenumber

Default:0

Angle of bar orientation in degrees (0 = vertical bars, 90 = horizontal bars)

angle

numberDefault: 0

Angle of bar orientation in degrees (0 = vertical bars, 90 = horizontal bars)

intensitynumber

Default:0.15

Maximum displacement per bar

intensity

numberDefault: 0.15

Maximum displacement per bar

seednumber

Default:0

Randomization seed for per-bar offset variation

seed

numberDefault: 0

Randomization seed for per-bar offset variation

speednumber

Default:0

Animation speed — each bar drifts at its own rate and direction

speed

numberDefault: 0

Animation speed — each bar drifts at its own rate and direction

edges"stretch" | "transparent" | "mirror" | "wrap"

Default:mirror

How to handle edges when distortion pushes content out of bounds

edges

"stretch" | "transparent" | "mirror" | "wrap"Default: mirror

How to handle edges when distortion pushes content out of bounds

Usage

<Shader>
  <BarShift
    :intensity="0.15"
  >
    <Circle />
  </BarShift>
</Shader>

<Shader>
  <BarShift
    intensity={0.15}
  >
    <Circle />
  </BarShift>
</Shader>

<Shader>
  <BarShift
    intensity={0.15}
  >
    <Circle />
  </BarShift>
</Shader>

<Shader>
  <BarShift
    intensity={0.15}
  >
    <Circle />
  </BarShift>
</Shader>

import { createShader } from 'shaders/js'

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

Aurora

Beam

Documentation

BarShift

Props

Usage