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 lines appear as glowing neon trails with a motion blur effect, creating a sense of rapid downward movement. The color palette transitions smoothly from vibrant magenta/hot pink (#f42797) on the left side through cyan and bright turquoise (#00ffca) on the right side, with intermediate shades of pink, gray, and green visible throughout. Each line has a soft glow with feathered edges that fade from opaque to transparent, creating a luminous trail effect. The lines vary in length and intensity, with approximately 40 lines distributed across the frame. A tilt-shift blur effect is applied at a 52-degree angle with 80% falloff, creating selective focus that makes some lines appear sharper while others fade into soft bokeh. The overall atmosphere is cyberpunk and energetic, with the neon colors creating strong contrast against the dark background. The gradient masking creates a smooth color transition across the composition, and the motion suggests data flow or digital rain.

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="#f42797" color-b="#00ffca" 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>