Shaders
header.lightDarkMode D
Gallery

Cascading Lines 6

Cascading Lines

A vibrant shader effect featuring vertical falling lines that cascade downward across the composition. The background is dominated by a rich purple base color (#992ed9) that provides the foundational canvas. Overlaid on this are numerous thin vertical lines in white and light purple tones that appear to fall or stream downward at a 90-degree angle, creating a rain-like or data-stream effect. The lines vary in length and opacity, with some appearing as full-height strokes while others are shorter, creating depth and visual rhythm. Interspersed throughout the composition are golden-orange accents (#c57208) that add warmth and contrast to the cool purple palette. The lines have a soft, slightly transparent quality with varying opacity levels, creating a layered, ethereal appearance. A subtle swirl effect adds organic movement and distortion to the overall pattern, preventing it from appearing too rigid or mechanical. The dithering effect adds a grainy texture with a linear dodge blend mode, creating subtle highlights and a slightly noisy, analog quality. The overall mood is modern, energetic, and somewhat digital or technological in nature, with a sense of motion and flow from top to bottom. The composition maintains consistent density across the frame with no clear focal point, creating an immersive, all-over pattern effect.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#992ed9" />
    <Swirl :blend="35" color-a="#ce99ed" color-b="#c57208" :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>