Shaders
header.lightDarkMode D
Gallery

A dynamic shader effect featuring horizontal glowing lines arranged in a staggered, offset pattern against a very dark forest green background. The lines emit a bright lime-green glow with soft rounded endpoints, creating a neon-like appearance. The lines vary slightly in length and are positioned at different horizontal offsets, creating a sense of depth and movement. The glow has a subtle gradient from bright lime-green (#88df46) to a slightly muted sage-green (#98da83), giving the lines dimensional quality. The overall effect suggests motion or data flow, with the lines appearing to float or stream across the dark background. The contrast between the intense bright green luminescence and the nearly black background creates a high-energy, tech-forward aesthetic reminiscent of terminal displays or digital scanning effects. The lines maintain consistent width with smooth anti-aliased edges and a trailing luminescence effect that suggests velocity or continuous animation.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0b2102" />
    <FallingLines id="idmmijuosi5e6y2didn" :angle="186" 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="#88df46" color-b="#98da83" 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>