Cascading Markers 8

A sophisticated layered shader effect featuring concentric curved stripes that create a tunnel-like perspective receding into the distance. The base layer consists of diagonal stripes at 45 degrees alternating between muted blue (#5b7a9e) and soft lavender (#d4b8e0) with perfect 0.5 balance. Overlaid on this are falling lines with a density of 36, creating subtle animated streaks in soft blue (#8fb8c9) and warm beige (#e6d0c4) tones that move diagonally at low speed (0.2) with 0.97 trail length, giving a sense of gentle motion. A subtle twirl distortion with -0.3 intensity is applied near the top-left corner (0.048, 0.073), creating a slight warping effect that adds dimensionality. A tilt-shift blur effect is centered slightly right of center (0.461, 0.528) at 142-degree angle with 0.2 width and 0.7 falloff, creating a selective focus that blurs the outer regions while keeping the center relatively sharp, enhancing the depth-of-field illusion. Fine film grain with 0.2 strength is applied uniformly across the entire composition, adding texture and a cinematic quality. The overall effect creates a dreamy, ethereal atmosphere with soft pastel colors, gentle motion, and a strong sense of depth and perspective receding toward a vanishing point.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Stripes color-a="#5b7a9e" color-b="#d4b8e0" :density="1" :speed="0" />
    <FallingLines :angle="45" color-a="#8fb8c9" color-b="#e6d0c4" :density="36" :rounding="0" :speed="0.2" :speed-variance="0.45" :stroke-width="1.1" :trail-length="0.97" />
    <Twirl :center="{ x: 0.05, y: 0.07 }" edges="mirror" :intensity="-0.3" />
    <TiltShift :angle="142" :center="{ x: 0.46, y: 0.53 }" :falloff="0.7" :intensity="100" :visible="true" :width="0.2" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>