Shader Atlas
한국어
≈ Distortions

Surface 3 D

3D 파동 표면

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

Also known as: Surface3D3D wave surface

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, Surface3D } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/photo.jpg" />
      <Surface3D />
    </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, Surface3D } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/photo.jpg"/>
    <Surface3D/>
  </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, Surface3D } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/photo.jpg" />
  <Surface3D />
</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, Surface3D } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/photo.jpg" />
      <Surface3D />
    </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/photo.jpg',
      },
    },
    {
      type: 'Surface3D',
    }
  ]
}, { disableTelemetry: true })

Props · Surface3D

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

NameValueDefaultRange / optionsDescription
amplitudeAmplitude0.30 – 1 (step 0.01)Wave height
waveTypeWave Typefractalfractal · sine · ridgeWave pattern type
frequencyFrequency1.50.1 – 5 (step 0.1)Wave frequency
octavesOctaves21 – 5 (step 1)Detail octaves
seedSeed00 – 100 (step 1)Random seed offset
speedSpeed0.50 – 3 (step 0.1)Animation speed
tiltTilt350 – 85 (step 1)Camera tilt in degrees
rollRoll0-45 – 45 (step 1)Camera roll in degrees
heightHeight0-1 – 2 (step 0.01)Camera height
zoomZoom10.3 – 3 (step 0.01)Camera zoom
nearCutoffNear Cutoff00 – 1 (step 0.01)Near fade distance
farCutoffFar Cutoff10 – 1 (step 0.01)Far fade distance
edgePinningEdge Pinning00 – 1 (step 0.01)Smoothly flatten the surface at its edges (orthogonal to edge mode)
edgesEdgesmirrorstretch · transparent · mirror · wrapHow to handle content beyond the surface bounds
lightingLighting300 – 100 (step 1)Intensity of lighting and shading
glossinessGlossiness00 – 100 (step 1)Surface glossiness
highlightsHighlights150 – 100 (step 1)Specular highlight intensity
lightXLight X0.4-1 – 1 (step 0.01)Light direction X
lightYLight Y-0.6-1 – 1 (step 0.01)Light direction Y
lightZLight Z0.7-1 – 1 (step 0.01)Light direction Z
lightColorLight Color#ffffff—Light color
cursorIntensityCursor Ripples10 – 2 (step 0.01)Strength of cursor ripples
cursorSpeedRipple Speed0.50 – 1 (step 0.01)Speed of cursor ripple propagation

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

Form 3 D3D 형태 매핑

The input wraps around a lit 3D shape, turning flat content into a dimensional object.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Wave Distortion파동 왜곡

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

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Perspective원근 변형

A flat image tilts in 3D, with perspective changing the apparent size of its near and far sides.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Repeater레이어 반복

One input repeats in a grid, circle, or line, with optional variation between copies.

Like fabric or a flag held in the wind, a flat image drapes over a wavy surface and moves with visible depth.

Increase `amplitude` for taller waves and choose the pattern with `waveType`. `frequency` changes how closely the waves repeat, `tilt` changes the camera angle, and `lighting` controls surface shading.

Place it above an image or pattern layer. `Form3D` emphasizes a shape such as a ribbon or sphere; this effect emphasizes a wave surface. Tune `edges`, `nearCutoff`, and `farCutoff` around the frame, and avoid long copy that becomes wavy across the surface.

When to use

Use it for fabric or flag-like motion, waving banners, and dimensional backgrounds. Avoid it for small copy or tables that need a flat, precise layout.

Open as page ↗