Shader Atlas
한국어
◎ Light & lens

Contour Lines

등고선

Draws topographic contour lines from the input's luminance or alpha.

Also known as: ContourLinesTopographic linesIsolines

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

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

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

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

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

Props · ContourLines

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

NameValueDefaultRange / optionsDescription
levelsLevels52 – 30 (step 1)Number of contour levels
lineWidthLine Width20.5 – 5 (step 0.1)Width of the contour lines in pixels
softnessSoftness00 – 1 (step 0.01)Edge softness of the lines (0 = sharp, 1 = soft)
gammaGamma0.50.1 – 2 (step 0.01)Contour distribution. <1 clusters in bright, >1 clusters in dark
invertInvertfalse—Invert the source values
sourceSourceluminanceluminance · alphaUse luminance or alpha channel for contours
colorModeColor Modesourcesource · customUse source image colors or custom colors
lineColorLine Color#000000—Color of the contour lines (custom mode)
backgroundColorBackground Colortransparent—Background color (custom mode)

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

Gradient Map그라디언트 맵

Maps the source luminance through a color gradient to recolor the image.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Particle Field파티클 필드

Turns the source into a breathing 3D particle field whose depth follows its brightness.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Vignette비네트

Darkens or tints the frame edges to draw attention toward the center.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Time Trail시간 잔상

Leaves a smooth, decaying long-exposure trail behind changing content.

Like a topographic map, contour lines appear at different brightness levels. It makes a photograph feel as though its light and dark regions were terrain elevations.

`levels` defaults to 5 (range 2–30) and adds or removes contour steps. `lineWidth` defaults to 2px (0.5–5px) and sets stroke thickness; `softness` defaults to 0 (0–1) softens the edges. `gamma` defaults to 0.5 (0.1–2) shifts where lines gather between bright and dark areas, and `source` defaults to "luminance" to choose brightness or alpha as the contour source.

Apply it to an image or shape; clear changes in brightness make the lines easier to read. A single line color can pair with a gradient map for a map-like poster, but too many contours can clutter the source image.

When to use

Use it for topographic-style posters, music visuals, and backgrounds that turn photos into abstract patterns. Avoid it when the source has fine detail or needs to retain a natural photographic look.

Open as page ↗