Shaders
header.lightDarkMode D
Gallery

Drifting Contours 8

Drifting Contours

A dynamic abstract shader composition featuring flowing, organic wave-like contour lines rendered against a vibrant purple gradient background. The primary visual element consists of multiple concentric curved lines that create a topographic or liquid surface effect, with the lines appearing to flow and undulate across the composition. The contour lines are rendered in white and light cyan, creating a luminous quality against the deep purple (#6342e6) background. The lines exhibit varying thickness and spacing, creating a sense of depth and three-dimensionality. The overall effect suggests fluid dynamics or heat mapping, with the curved patterns flowing from the left side toward the center-right, creating an asymmetrical, organic composition. A subtle green-yellow tint appears along the outer edges of the line work, likely from the Blob component's highlight color (#fbffb3). The Liquify effect adds a subtle warping and distortion to the contours, making them appear slightly melted or fluid. The gamma correction and high contrast settings create sharp, well-defined line edges despite the organic nature of the underlying plasma and blob effects. The composition has a modern, tech-forward aesthetic with a sense of movement and energy, despite being a static image.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Plasma :balance="29" color-a="#f8932d" color-b="#6342e6" :contrast="0.7" :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.46, y: 1 }" color-a="#8ec070" color-b="#b7e9c4" :deformation="0.7" highlight-color="#fbffb3" :highlight-intensity="1" :highlight-x="-0.5" :highlight-y="-0.6" :highlight-z="-0.1" :seed="41" :size="0.7" :softness="1" :speed="0.2" />
    </ContourLines>
    <Liquify :decay="0.5" :intensity="1" :radius="3" />
  </Shader>
</template>