Shaders
header.lightDarkMode D
Gallery

A dynamic shader effect featuring diagonal streaking lines at approximately 40-degree angle against a very dark navy-black background (#140d1c). The falling lines create a sense of rapid downward motion with a meteor or rain-like quality. The lines transition through a gradient color palette dominated by vibrant yellow-lime (#c0c01b) on the warmer side and bright magenta-purple (#d18aff) on the cooler side, with intermediate pink and lavender tones. Each line has a soft, glowing quality with gradient falloff from opaque center to transparent edges, creating a neon-like luminescence effect. The lines vary in brightness and saturation, with some appearing more saturated yellow-green while others shift toward purple and pink hues. A tilt-shift blur effect is applied at a 52-degree angle with significant falloff (0.8), creating selective focus that makes the center lines appear sharper while edges gradually blur, enhancing the depth and sense of motion. The overall atmosphere is futuristic and energetic, with a cyberpunk aesthetic. The density of lines (40 units) creates a moderately populated field without complete saturation, allowing the dark background to remain visible and create contrast. The motion blur and trail length (0.31) contribute to the sense of high-speed movement downward across the frame.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
    color-space="srgb"
  >
    <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="#c0c01b" color-b="#d18aff" 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>