Cascading Lines 3

A dynamic digital visualization featuring vertical falling lines that create a rain-like effect against a dark teal background. The composition uses a color gradient transitioning from cyan/turquoise on the right side to magenta/purple on the left side. The vertical lines vary in height and opacity, creating a wave-like pattern that suggests audio visualization or data representation. The lines are rendered with a soft glow effect, appearing to emit light against the dark background. A subtle dither pattern with a linear dodge blend mode adds texture and grain throughout, enhancing the digital aesthetic. The overall effect creates a sense of motion and flow, with the lines appearing to cascade downward at varying speeds. The color palette shifts smoothly across the canvas, with the brightest cyan tones in the center-right and deeper purple tones on the left edges. The atmosphere is modern, technological, and energetic, reminiscent of audio equalizers or real-time data visualization interfaces.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0c2c36" />
    <Swirl :blend="35" color-a="#59ebe5" color-b="#9622f2" :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>