Cascading Markers

A dynamic shader composition featuring concentric curved rectangular stripes that create a tunnel-like perspective effect. The base layer consists of alternating stripes in deep blue (#0b4478) and magenta (#ce20b0) at 45-degree angles, forming the foundational pattern. Overlaid on this are falling diagonal lines with a gradient from purple (#a103e7) to peachy-tan (#fdc7a8), creating a sense of motion and depth with 36 lines of density. A strong twirl distortion effect with -0.7 intensity warps the entire composition, particularly concentrated toward the right-center area (0.727, 0.508), creating a vortex-like spiral that pulls the striped pattern into curved, flowing waves. A tilt-shift blur effect is applied at 159-degree angle with a 0.2 width, creating selective focus that enhances the three-dimensional tunnel effect. The overall atmosphere is ethereal and hypnotic, with smooth gradient transitions between purple, pink, and cream tones. Film grain at 0.2 strength adds subtle texture throughout. The composition creates a sense of infinite depth and movement, with the curved stripes appearing to recede into the distance while the falling lines suggest continuous motion forward.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Stripes color-a="#0b4478" color-b="#ce20b0" :density="1" :speed="0" />
    <FallingLines :angle="45" color-a="#a103e7" color-b="#fdc7a8" :density="36" :rounding="0" :speed="0.2" :speed-variance="0.45" :stroke-width="1.1" :trail-length="0.97" />
    <Twirl :center="{ x: 0.73, y: 0.51 }" edges="mirror" :intensity="-0.7" />
    <TiltShift :angle="159" :center="{ x: 0.59, y: 0.68 }" :falloff="0.7" :intensity="100" :visible="true" :width="0.2" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>