Shaders
header.lightDarkMode D
Gallery

A dynamic abstract shader effect featuring diagonal streaking lines that appear to fall across the composition at approximately 40 degrees from horizontal. The background is a deep, nearly black dark navy color (#140d1c) that provides stark contrast. Multiple parallel lines in varying lengths create a sense of rapid motion and depth. The lines transition through a vibrant color gradient that shifts from bright cyan/turquoise (#05abaa) on the left side through blue and purple tones to deep purple (#582cb4) on the right side. Each line has a glowing quality with soft edges that fade from opaque to transparent, creating a trail effect. The lines appear to have varying opacity and blur, with some appearing sharper in the foreground and others softer in the background, suggesting depth and atmospheric perspective. A tilt-shift blur effect is applied at a 52-degree angle with 80% falloff, creating selective focus that makes certain areas appear sharper while others fade into soft focus. The overall mood is futuristic and energetic, reminiscent of digital data streams or particle effects in motion. The composition has a strong sense of directional movement and speed.

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="#05abaa" color-b="#582cb4" 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>