Redacted Bars 3

A dynamic gradient shader effect displaying diagonal parallel lines that transition smoothly across a color spectrum. The composition features a dark navy/black background (#0a0b14) with approximately 13 evenly-spaced diagonal lines angled at 345 degrees, creating a sense of forward motion. The lines exhibit a smooth color gradient progression from warm yellow-green tones in the upper left (#cce8a5) through orange, coral, pink, and magenta hues in the center, transitioning to deep blue and purple tones (#090e82) in the lower right. Each line has soft, rounded edges with a glowing quality and appears to have a trailing effect that creates depth. The lines maintain consistent spacing and thickness (approximately 0.34 stroke width) while the gradient mask creates a luminous quality where colors blend seamlessly. A tilt-shift blur effect with 90% falloff is applied, keeping the center sharp while edges remain slightly softened. The overall mood is modern, energetic, and tech-forward with a sense of movement and dimensionality. The color transitions follow an oklch color space for smooth perceptual gradients.

Code

vue

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0a0b14" />
    <FallingLines id="idmmijuosi5e6y2didn" :angle="345" color-b="#cccccc00" color-space="oklab" :density="13" :speed="0.1" :speed-variance="0.15" :stroke-width="0.34" :trail-length="0.95" :visible="false" />
    <LinearGradient color-a="#cce8a5" color-b="#090e82" color-space="oklch" edges="mirror" :end="{ x: 1, y: 1 }" mask-source="idmmijuosi5e6y2didn" :start="{ x: 0, y: 0 }" />
    <TiltShift :falloff="0.9" :intensity="100" :width="0" />
  </Shader>
</template>