Cascading Lines

A dynamic audio visualization featuring vertical falling lines that create a waveform-like pattern against a dark background. The composition uses a gradient color scheme transitioning from warm orange and golden tones in the upper left to vibrant purple and magenta hues across the center and right portions. The vertical lines vary in height, creating peaks and valleys that resemble an audio equalizer or frequency spectrum analyzer. Each line has a soft, glowing quality with semi-transparent edges that fade into the black background (#16101a). The lines are densely packed with approximately 60 lines per frame, creating a rhythmic, striped texture. A subtle swirl effect with a blend value of 35 adds organic movement and distortion to the linear pattern, creating a sense of fluidity and motion. The overall effect combines the precision of geometric line work with the organic quality of color gradients, producing a modern, tech-forward aesthetic with a musical or data-visualization theme. The dither effect with a Bayer4 pattern adds subtle noise and texture, enhancing the visual complexity without overwhelming the primary linear structure.

<script setup lang="ts">
import {
  Shader,
  Dither,
  FallingLines,
  SineWave,
  SolidColor,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#16101a" />
    <Swirl :blend="35" color-a="#a526ec" color-b="#da8a38" :detail="2" mask-source="idmmzanabwzt8f61fke" />
    <FallingLines id="idmmzanabwzt8f61fke" :density="60" :speed="0.1" :speed-variance="0.7" :stroke-width="0.66" :trail-length="{ type: 'map', curve: -0.15, source: 'idmmzaokw5nk6ntmihd', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 1, outputMin: 0.01 }" :visible="false" />
    <SineWave id="idmmzaokw5nk6ntmihd" :amplitude="0.4" :angle="26" :frequency="0.5" :softness="1" :speed="0.4" :thickness="1" :visible="false" />
    <Dither blend-mode="linearDodge" color-mode="source" :pixel-size="3" />
  </Shader>
</template>