Shaders
header.lightDarkMode D
Gallery

A dynamic shader effect featuring diagonal falling lines at approximately 40 degrees angle against a very dark background. The lines appear to be streaking downward with motion blur, creating a sense of rapid movement. The color palette transitions from bright white and light gray at the top of each line to vibrant lime green and darker green tones in the middle sections, with some lines fading to near-transparent. The lines have varying lengths and opacity, creating depth and layering. A tilt-shift blur effect is applied at a 52-degree angle with significant falloff, causing the edges of the composition to blur while maintaining some focus in the center. The overall atmosphere is dark and tech-oriented, reminiscent of digital rain or data streams. The background is a very dark near-black color (#140d1c), providing high contrast against the luminous falling elements. The gradient coloring on the lines uses oklab color space, blending from pale gray-white (#cdc6dc) to bright green (#44aa2e), creating a smooth chromatic transition along each line's length.

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="#cdc6dc" color-b="#44aa2e" 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>