Cascading Markers 3

A dynamic, layered shader effect featuring diagonal striped patterns at 45-degree angles with a vibrant color palette. The base layer consists of lime-green (#7ae35a) and purple (#c496db) diagonal stripes creating a static foundation. Overlaid on this are falling animated lines in bright blue (#2388f5) and deep crimson red (#c80c41) that cascade diagonally across the composition with a speed of 0.2, creating a sense of motion and depth. The lines have a trail length of 0.97 with speed variance of 0.45, producing organic, slightly stuttering movement. A twirl distortion effect is applied with moderate intensity (0.5) centered in the upper-right quadrant (approximately 60% horizontally, 16% vertically), creating a subtle spiral warping of the underlying patterns. A tilt-shift blur effect is applied at a 125-degree angle with a narrow focus band (width 0.2) and 0.7 falloff, creating selective focus that blurs portions of the composition while keeping a diagonal band sharp. The overall effect is enhanced with film grain at 0.2 strength, adding subtle texture and analog quality. The composition has a mirror edge treatment on the twirl effect and transparent edges on other transforms. The color space is linear, and all elements use normal blend mode with full opacity, creating a cohesive, vibrant, and slightly psychedelic visual experience with strong depth and motion cues.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Stripes color-a="#7ae35a" color-b="#c496db" :density="1" :speed="0" />
    <FallingLines :angle="45" color-a="#2388f5" color-b="#c80c41" :density="36" :rounding="0" :speed="0.2" :speed-variance="0.45" :stroke-width="1.1" :trail-length="0.97" />
    <Twirl :center="{ x: 0.6, y: 0.16 }" edges="mirror" :intensity="0.5" />
    <TiltShift :angle="125" :center="{ x: 0.7, y: 0.24 }" :falloff="0.7" :intensity="100" :visible="true" :width="0.2" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>