Cascading Markers 2

A mesmerizing abstract shader effect featuring concentric rectangular frames that spiral inward toward the center, creating a tunnel-like perspective. The base layer consists of diagonal stripes at 45 degrees alternating between blue (#3471d1) and light-green (#98eaa6), providing a foundational pattern. Overlaid on this are falling diagonal lines in coral-red (#c95150) and soft gray-blue (#a6c5c9) that cascade downward at a 45-degree angle with a speed of 0.2, creating a sense of motion and depth. A strong twirl distortion effect with negative intensity (-0.7) warps the entire composition around a point in the upper-left quadrant (approximately 17.8% from left, 23.7% from top), pulling the rectangular frames into a spiral vortex pattern. A tilt-shift blur effect is applied at a 159-degree angle, creating a selective focus that emphasizes the central spiral while softening the peripheral areas with a falloff of 0.7. The overall effect is enhanced with subtle film grain at 0.2 strength, adding texture and a slightly vintage quality. The color palette transitions from cool blues and greens in the striped base to warm coral-reds in the falling lines, creating visual tension. The mirrored edge handling on the twirl effect creates seamless continuity at the boundaries. The composition evokes a sense of motion, depth, and hypnotic movement drawing the viewer's eye toward the center.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Stripes color-a="#3471d1" color-b="#98eaa6" :density="1" :speed="0" />
    <FallingLines :angle="45" color-a="#c95150" color-b="#a6c5c9" :density="36" :rounding="0" :speed="0.2" :speed-variance="0.45" :stroke-width="1.1" :trail-length="0.97" />
    <Twirl :center="{ x: 0.18, y: 0.24 }" edges="mirror" :intensity="-0.7" />
    <TiltShift :angle="159" :center="{ x: 0.4, y: 0.38 }" :falloff="0.7" :intensity="100" :visible="true" :width="0.2" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>