Shaders
header.lightDarkMode D
Gallery

Drifting Contours 3

Drifting Contours

A smooth, flowing gradient shader effect dominated by soft, organic curves and wave-like patterns. The primary visual consists of layered, undulating lines that flow from the upper left toward the lower right, creating a sense of fluid motion and depth. The base gradient transitions smoothly from cyan-blue tones in the upper left to vibrant green in the center and right portions. Overlaid on this are delicate contour lines rendered in blue-green hues that follow the underlying plasma distortion, creating a topographic map-like appearance with approximately 30 distinct line levels. The lines are thin and precise, with a width of 1.5 pixels, creating a technical yet organic aesthetic. The overall effect suggests flowing energy or liquid dynamics with a modern, minimalist design sensibility. The edges fade to transparency, and the composition has a calm, meditative quality with smooth interpolation between color zones. The liquify effect adds subtle warping and distortion to the contour lines, creating a sense of movement and fluidity throughout the composition.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Blob,
  ContourLines,
  Liquify,
  Plasma
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Plasma :balance="40" color-a="#0c11f6" color-b="#37e084" :density="0.9" :warp="0.3" />
    <ContourLines :gamma="0.1" :levels="30" line-color="#ff4a4a" :line-width="1.5" source="alpha">
      <Blob :center="{ x: 0.68, y: 0 }" color-a="#29d822" color-b="#0019ff" :deformation="0.2" highlight-color="#fbffb3" :highlight-intensity="1" :highlight-x="-0.5" :highlight-y="-0.6" :highlight-z="-0.1" :seed="42" :size="1" :softness="1" :speed="0.2" />
    </ContourLines>
    <Liquify :decay="0.5" :intensity="1" :radius="3" />
  </Shader>
</template>