Cascading Lines 9

A dynamic audio visualization featuring vertical falling lines that create a waveform-like pattern against a dark navy background (#0f0a1e). The lines are predominantly pink/magenta (#b81450) on the left and upper portions, transitioning to blue (#1a3fe8) on the right and lower portions, creating a smooth color gradient across the composition. The vertical lines vary in height and intensity, resembling an equalizer or frequency spectrum display with approximately 60 lines of varying densities. Each line has a soft, glowing quality with a stroke width of 0.66 pixels and trails that fade from opaque to transparent. The lines appear to be falling or moving downward at a slow speed (0.1), with speed variance creating organic, non-uniform motion. A subtle dithering effect with a Bayer4 pattern is applied using linear dodge blending, adding fine grain texture and enhancing the luminosity of the brighter elements. The overall effect is a modern, neon-like audio reactive visualization with a cyberpunk aesthetic, where the color transition from warm magenta to cool blue creates visual depth and movement across the frame.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0f0a1e" />
    <Swirl :blend="35" color-a="#b81450" color-b="#1a3fe8" :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>