Shaders
header.lightDarkMode D
Gallery

A dynamic shader effect featuring diagonal falling lines at approximately 40 degrees angle against a very dark navy-black background (#140d1c). The primary visual element consists of numerous elongated rounded rectangular strokes that cascade diagonally from upper-left to lower-right, creating a sense of motion and depth. These lines transition from a vibrant hot pink/red (#f44d5e) at their brightest points to a soft pale pink (#fcc5d0) and fade to transparency, creating a glowing trail effect. The lines have varying opacity and brightness, with some appearing more saturated while others fade into the dark background. A tilt-shift blur effect is applied at a 52-degree angle with significant falloff (0.8), which creates a selective focus that softens the overall image while maintaining some sharpness in specific regions. The effect has a high-tech, digital aesthetic with a sense of rapid movement and energy. The color gradient uses oklab color space for smooth transitions between the red and pink tones. The overall mood is modern, energetic, and slightly ethereal with a neon-like quality despite the relatively muted saturation due to the blur effect.

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="#f44d5e" color-b="#fcc5d0" 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>