Shaders
header.lightDarkMode D
Gallery

A dynamic shader effect featuring diagonal falling lines at a 115-degree angle against a dark navy background (#020521). The composition consists of multiple layered elements: a solid dark navy base layer, overlaid with animated white-to-transparent falling lines that create a sense of motion and depth. A linear gradient mask is applied to these lines, transitioning from purple (#5b59a6) on the left side to a warm tan/gold (#b38d4b) on the right side, creating a subtle color shift across the composition. The falling lines have a stroke width of 0.34 with a trail length of 0.95, giving them a soft, elongated appearance as they descend. The lines are evenly distributed with a density of 13, creating a regular pattern. A tilt shift effect with zero width and high falloff (0.9) is applied, though with minimal visible impact due to the width setting. The overall atmosphere is sleek and modern, with a sense of gentle motion and technological sophistication. The color gradient transitions smoothly from cool purples on the left to warm earth tones on the right, creating visual interest and depth despite the minimalist design.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#020521" />
    <FallingLines id="idmmijuosi5e6y2didn" :angle="115" color-b="#cccccc00" color-space="hsl" :density="13" :speed="0.1" :speed-variance="0.15" :stroke-width="0.34" :trail-length="0.95" :visible="false" />
    <LinearGradient color-a="#5b59a6" color-b="#b38d4b" color-space="oklab" edges="mirror" :end="{ x: 1, y: 0 }" mask-source="idmmijuosi5e6y2didn" :start="{ x: 0, y: 1 }" />
    <TiltShift :falloff="0.9" :intensity="100" :width="0" />
  </Shader>
</template>