Shader Atlas
한국어
≈ Distortions

Wave Distortion

파동 왜곡

The input ripples in a repeating wave that can move across the frame.

Also known as: WaveDistortionWave warp

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, ImageTexture, WaveDistortion } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/poster.jpg" />
      <WaveDistortion />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script setup lang="ts">
import { Shader, ImageTexture, WaveDistortion } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/poster.jpg"/>
    <WaveDistortion/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script>
  import { Shader, ImageTexture, WaveDistortion } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/poster.jpg" />
  <WaveDistortion />
</Shader>
Solid
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, ImageTexture, WaveDistortion } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/poster.jpg" />
      <WaveDistortion />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/poster.jpg',
      },
    },
    {
      type: 'WaveDistortion',
    }
  ]
}, { disableTelemetry: true })

Props · WaveDistortion

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
strengthStrength0.30 – 1 (step 0.01)Distortion intensity
frequencyFrequency10.1 – 10 (step 0.1)Number of bends/waves
speedSpeed10 – 5 (step 0.1)Animation speed
angleAngle00 – 360 (step 1)Direction of wave distortion in degrees
waveTypeWave Typesinesine · triangle · square · sawtooth · bounceShape of the distortion wave
edgesEdgesstretchstretch · transparent · mirror · wrapHow to handle edges when distortion pushes content out of bounds

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Flow Field플로우 필드 왜곡

The image drifts continuously along a smooth, fluid-like flow.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Displacement Map변위 맵

A source layer's pixel values push the input image around in different places.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Surface 3 D3D 파동 표면

The input drapes over a lit 3D wave surface with visible depth and perspective.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Bar Shift바 시프트

Parallel strips offset by different amounts create a fractured or glitch-like image.

Like looking through moving water, lines and shapes ripple across the image in a repeating wave.

Increase `strength` for a wider displacement and `frequency` for more bends across the frame. Turn `angle` to change the wave direction, choose a shape with `waveType`, and adjust `speed` to control its motion.

Apply it above an input layer. Pair it with `FlowField` to combine regular ripples with fluid movement. Choose boundary behavior with `edges`, and avoid small copy or straight UI lines that become hard to read when they ripple.

When to use

Use it for water-like or heat-haze backgrounds, flowing transitions, and animated type decoration. Avoid it for copy or tables that need exact alignment.

Open as page ↗