Redacted Bars 5

A dynamic shader effect displaying diagonal parallel lines at a 31-degree angle flowing from upper-left to lower-right across a dark background. The lines feature a sophisticated color gradient transitioning from golden-yellow (#a39148) on the left side through warm orange and coral tones in the center, culminating in deep magenta-pink (#ce235c) on the right side. Each line has a soft, rounded stroke with a trailing gradient effect that creates a sense of motion and depth. The lines are evenly spaced with consistent density, creating a rhythmic pattern. The background is a very dark navy-black (#0a0b14) that provides high contrast, making the colored lines appear to float and glow. The overall effect suggests movement or energy flowing diagonally across the composition, with a smooth blend between warm and cool color temperatures. A subtle tilt-shift effect with minimal width and high falloff is applied, though its impact is minimal given the width setting of 0. The color space uses OKLCH 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="31" color-b="#cccccc00" color-space="hsl" :density="13" :speed="0.1" :speed-variance="0.15" :stroke-width="0.34" :trail-length="0.95" :visible="false" />
    <LinearGradient color-a="#a39148" color-b="#ce235c" color-space="oklch" edges="mirror" :end="{ x: 1, y: 0 }" mask-source="idmmijuosi5e6y2didn" :start="{ x: 0, y: 1 }" />
    <TiltShift :falloff="0.9" :intensity="100" :width="0" />
  </Shader>
</template>