Cascading Lines 2

A dynamic shader effect featuring vertical falling lines with varying heights creating a waveform or audio visualization aesthetic. The composition uses a dark charcoal background (#1c1b21) as the base layer. Vertical strokes in light blue (#8a9fb9) and white dominate the center and right portions, while magenta and pink (#a5006d) tones concentrate on the left and right edges, creating a color gradient transition. The lines appear to cascade downward with staggered heights, suggesting motion and rhythm. A subtle swirl effect blends the color palette, creating smooth transitions between the cool blue tones and warm magenta accents. The overall effect has a glitchy, digital quality enhanced by dithering that adds texture and grain throughout. The lines maintain consistent vertical alignment with slight variations in opacity and length, creating depth and visual interest. The mood is modern, energetic, and atmospheric with a cyberpunk or synthwave aesthetic.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#1c1b21" />
    <Swirl :blend="35" color-a="#8a9fb9" color-b="#a5006d" :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>