Cascading Lines 5
Cascading LinesA dynamic shader effect featuring vertical falling lines that cascade downward from the top of the composition. The background is a deep burgundy-red (#913030) that provides a warm, rich foundation. Overlaid on this base are numerous thin vertical strands in golden-yellow (#f4a01d) and cream (#ddc593) tones that fall at varying speeds and lengths, creating a rain-like or curtain effect. The lines have varying opacity and trail lengths, with some appearing more prominent and others fading into the background. A subtle swirl effect is applied, creating gentle undulation and movement within the falling lines pattern. The composition uses a dither pattern with a bayer4 algorithm applied with linear dodge blending, adding a subtle grainy texture and luminosity enhancement throughout. The overall effect creates a sense of motion and depth, with the golden lines appearing to cascade like liquid gold or light particles falling through a warm, dark space. The density of lines is moderate (60), allowing the background to show through while maintaining visual interest. The effect has a luxurious, elegant quality with warm autumn tones dominating the palette.
Code
<script setup lang="ts">
import {
Shader,
Dither,
FallingLines,
SineWave,
SolidColor,
Swirl
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<SolidColor color="#913030" />
<Swirl :blend="35" color-a="#f4a01d" color-b="#ddc593" :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>