Cascading Markers 4

A dynamic shader composition featuring layered diagonal striping effects at a 45-degree angle. The base layer consists of static stripes alternating between deep purple (#55128f) and cyan (#68adc3), creating a foundational color gradient. Overlaid on this are animated falling lines in bright blue (#2101f3) and lighter purple (#7a76e6) that cascade diagonally across the frame with a speed of 0.2, creating a sense of motion and depth. The falling lines have a trail length of 0.97, producing elongated streaks that fade subtly. A subtle twirl distortion effect is applied at coordinates (0.226, 0.576) with low intensity (0.2), creating a gentle warping in the left-center area. A tilt-shift blur effect is positioned at (0.467, 0.908) with an angle of 125 degrees, creating a focused band across the lower-right portion while the rest gradually blurs, enhancing depth perception. Film grain with 0.2 strength adds subtle texture and analog quality throughout. The overall atmosphere is cool-toned, tech-forward, and ethereal, with a sense of flowing data or digital streams. The depth-of-field effect combined with the motion creates a cinematic, immersive quality.

<script setup lang="ts">
import {
  Shader,
  FallingLines,
  FilmGrain,
  Stripes,
  TiltShift,
  Twirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Stripes color-a="#55128f" color-b="#68adc3" :density="1" :speed="0" />
    <FallingLines :angle="45" color-a="#2101f3" color-b="#7a76e6" :density="36" :rounding="0" :speed="0.2" :speed-variance="0.45" :stroke-width="1.1" :trail-length="0.97" />
    <Twirl :center="{ x: 0.23, y: 0.58 }" edges="mirror" :intensity="0.2" />
    <TiltShift :angle="125" :center="{ x: 0.47, y: 0.91 }" :falloff="0.7" :intensity="100" :visible="true" :width="0.2" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>