Cascading Markers 5

A mesmerizing abstract shader effect featuring layered curved stripes that create a tunnel-like perspective. The base consists of alternating vertical stripes in white (#ffffff) and dark navy blue (#232370) at a 45-degree angle, providing the foundational geometric structure. Overlaid on this are diagonal falling lines in gradient colors transitioning from purple (#675ff8) to cyan (#3eadc4), moving at a slow speed with a density of 36 lines creating a sense of motion and depth. The composition features a subtle twirl distortion centered in the upper right area (approximately 92.7% horizontally, 15.5% vertically) with 0.6 intensity, causing the parallel lines to curve and spiral inward, creating a vortex-like effect. A tilt-shift blur effect is applied at a 125-degree angle with moderate falloff, creating selective focus that enhances the depth perception and draws attention toward the center-upper region. The entire composition is enhanced with subtle film grain at 0.2 strength for texture and realism. The color palette transitions smoothly from cool purples and blues on the left to cyan and turquoise tones on the right, creating a vibrant, neon-like atmosphere. The effect conveys motion, depth, and a futuristic digital aesthetic with a sense of infinite perspective.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Stripes color-a="#ffffff" color-b="#232370" :density="1" :speed="0" />
    <FallingLines :angle="45" color-a="#675ff8" color-b="#3eadc4" :density="36" :rounding="0" :speed="0.2" :speed-variance="0.45" :stroke-width="1.1" :trail-length="0.97" />
    <Twirl :center="{ x: 0.93, y: 0.16 }" edges="mirror" :intensity="0.6" />
    <TiltShift :angle="125" :center="{ x: 0.51, y: 0.33 }" :falloff="0.7" :intensity="100" :visible="true" :width="0.2" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>