Cascading Lines 4

A digital shader effect featuring vertical falling lines that create a rain-like or matrix-inspired aesthetic. The composition uses a dark navy-black background (#0f191c) as the base layer. Overlaid are numerous thin vertical lines in varying heights, predominantly in bright lime-green (#ade79a) and cyan (#13bca9) tones that fade from opaque at the top to transparent at the bottom, creating a sense of depth and motion. The lines have a subtle glow quality and appear to be falling downward with variable speeds and trail lengths. A dithering pattern with a bayer4 algorithm adds fine texture and noise throughout, applied with a linear dodge blend mode to create subtle white highlights and grain. The overall effect suggests digital rain or cascading data streams, with the swirl component adding subtle color transitions between the green and cyan hues. The density of lines is moderate to high (60 density), creating a visually rich but not overwhelming pattern. The effect has a cool, technological atmosphere with a slight sense of motion and fluidity despite the static nature of the vertical orientation.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0f191c" />
    <Swirl :blend="35" color-a="#ade79a" color-b="#13bca9" :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>