Shaders
header.lightDarkMode D
Gallery

A dynamic neon shader effect featuring vertical falling lines with a gradient color transition. The background is a deep dark navy blue (#0a0d2b) providing a dark canvas. Overlaid are numerous vertical lines that appear to be falling or streaming downward at approximately 79 degrees, creating a sense of motion and depth. These lines transition from bright magenta/pink (#ff1f77) at the top-left to vibrant blue (#1000ff) at the bottom-right through a linear gradient. The lines have a glowing neon quality with soft edges and varying opacity, creating a trail effect as they descend. The overall composition suggests a cyberpunk or digital rain aesthetic with approximately 13 lines of varying brightness distributed across the frame. The gradient mask applied to the falling lines creates a smooth color transition from hot pink through purple to electric blue. The effect has a modern, tech-forward atmosphere with high contrast between the dark background and the luminous neon lines.

Code

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

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