Comet Streaks 7

A dynamic shader effect featuring diagonal falling lines at a 40-degree angle against a very dark navy-black background (#140d1c). The lines appear as elongated streaks with a motion blur effect, creating a sense of rapid downward movement. Each line transitions from bright white (#ffffff) at its leading edge to transparent, giving them a comet-like or rain-like appearance. The lines vary in length and intensity, with a trail length of approximately 31% creating a streaking effect. A subtle warm gradient overlay in brown and tan tones (#4b2a16 to #d4d3ba) is applied as a mask to the falling lines, adding depth and warmth to the otherwise cool white streaks. The gradient creates an organic, slightly brownish tint that varies across the composition. A tilt-shift blur effect with 50% intensity is applied at a 52-degree angle, creating selective focus that softens and blurs portions of the scene while keeping other areas sharper, enhancing the sense of depth and motion. The overall mood is cinematic and atmospheric, suggesting rainfall, digital data streams, or particle effects in motion. The density of 40 lines creates a moderate visual complexity without overwhelming the composition.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#140d1c" />
    <FallingLines id="idmmijuosi5e6y2didn" :angle="40" color-space="hsl" :density="40" :speed="0.1" :speed-variance="0.2" :stroke-width="1" :trail-length="0.31" :visible="false" />
    <LinearGradient color-a="#4b2a16" color-b="#d4d3ba" color-space="oklab" edges="mirror" :end="{ x: 0.41, y: 0.68 }" mask-source="idmmijuosi5e6y2didn" :start="{ x: 0.21, y: 0.82 }" />
    <TiltShift :angle="52" :falloff="0.8" :width="0" />
  </Shader>
</template>