Shaders
header.lightDarkMode D
Gallery

A dynamic shader effect featuring diagonal falling lines at a 40-degree angle against a very dark navy-black background (#140d1c). The primary visual element consists of elongated, softly-glowing streaks that transition from cyan and light-blue tones to purple and magenta hues, creating a sense of motion and depth. The lines have a gradient quality, fading from solid color at their top to transparent at their bottom, suggesting rapid downward movement. The effect employs a tilt-shift blur filter with a 52-degree angle that creates selective focus, making the center area sharper while the edges gradually blur and fade. The overall atmosphere is futuristic and ethereal, with a cool color temperature dominated by cyan-to-purple gradients. The lines appear to have soft, rounded edges with a stroke width of 1 pixel, and they're densely packed at 40 units, creating a rain-like or digital cascade effect. The color space uses oklab for smooth gradient transitions between the cyan (#7eb8c9) and purple (#c4a5d4) endpoints, resulting in a sophisticated color blend that feels modern and technological.

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="#7eb8c9" color-b="#c4a5d4" 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>