Redacted Bars 7

A dynamic shader effect featuring diagonal falling lines at a 72-degree angle against a dark navy background. The composition consists of multiple layered elements: a deep dark-blue solid color base (#0a0d2b) providing the foundation, overlaid with animated falling lines that transition from bright white (#ffffff) to transparent gray. These lines create a sense of motion and depth, appearing to cascade diagonally across the screen. A linear gradient mask is applied to the falling lines, blending from light periwinkle-blue (#a8c8e8) at the top to deep purple (#6049b3) at the bottom, creating a subtle color shift that adds dimensionality. The lines have a trail effect with 0.95 length, creating elongated streaks rather than solid marks. The overall effect has a modern, tech-forward aesthetic with a cool color temperature. A tilt-shift blur effect is applied with minimal width and high falloff (0.9), which slightly softens the overall image while maintaining clarity. The density of lines is set to 13, creating a balanced visual rhythm without overwhelming the composition. The stroke width of 0.34 produces thin, elegant lines that feel precise and intentional. The speed variance of 0.15 introduces subtle randomization to the falling motion, preventing mechanical repetition. The color space uses oklab for smooth, perceptually accurate color transitions.

Code

vue

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0a0d2b" />
    <FallingLines id="idmmijuosi5e6y2didn" :angle="72" 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="#a8c8e8" color-b="#6049b3" color-space="oklab" 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>