Cascading Markers 6

A dynamic diagonal striped shader effect with a 45-degree angle creating a chevron-like pattern. The base consists of alternating stripes in cyan (#1ed39a) and yellow (#cbdb51) with perfect geometric precision. Overlaid on this foundation are diagonal falling lines with a speed of 0.2, rendered in dark blue (#02236f) and muted purple (#97819a), creating a sense of motion and depth. The falling lines have a trail length of 0.97 with speed variance of 0.45, producing an organic, slightly chaotic movement against the rigid stripe pattern. A subtle twirl distortion with intensity -0.1 creates a gentle warping effect centered at coordinates (1, 1), adding a three-dimensional quality to the otherwise flat pattern. A tilt-shift blur effect is applied at a 125-degree angle with a narrow width of 0.2, creating a selective focus that emphasizes the upper-left portion of the composition while softening the lower-right area, enhancing the sense of depth. The overall atmosphere is cool and technological, with the purple-blue gradient background providing a sophisticated, digital aesthetic. Film grain with 0.2 strength adds texture and a subtle analog quality to the otherwise clean digital effect. The composition creates a sense of forward motion and energy through the diagonal orientation and animated falling elements.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Stripes color-a="#1ed39a" color-b="#cbdb51" :density="1" :speed="0" />
    <FallingLines :angle="45" color-a="#02236f" color-b="#97819a" :density="36" :rounding="0" :speed="0.2" :speed-variance="0.45" :stroke-width="1.1" :trail-length="0.97" />
    <Twirl :center="{ x: 1, y: 1 }" edges="mirror" :intensity="-0.1" />
    <TiltShift :angle="125" :center="{ x: 0.8, y: 0.24 }" :falloff="0.7" :intensity="100" :visible="true" :width="0.2" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>