Cascading Lines 7

A dynamic vertical striped pattern effect with thin parallel lines running from top to bottom against a dark navy-black background (#0a0a14). The lines display a vibrant color gradient transitioning from bright yellow (#ffe066) on the left side through orange and red (#ff2244) in the center and right portions. The lines vary in height and opacity, creating a wave-like undulating motion that suggests movement and flow. The effect resembles a sound visualizer or audio spectrum analyzer with individual frequency bars. The lines have soft, slightly transparent edges with a subtle glow quality. A fine dithering pattern with a bayer4 grid is applied using linear dodge blending, adding a grainy texture overlay that enhances the digital aesthetic. The overall composition creates a sense of energy and rhythm, with the color gradient and varying line heights producing depth and visual interest. The dark background provides strong contrast, making the warm color palette pop dramatically.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0a0a14" />
    <Swirl :blend="35" color-a="#ff2244" color-b="#ffe066" :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>