Shaders
header.lightDarkMode D
Gallery

A dynamic neon shader effect featuring radiating lines of light emanating from a focal point in the lower-left quadrant against a deep dark background. The composition displays approximately 15-20 diagonal lines that transition smoothly from vibrant magenta/pink on the left side to bright lime-green on the right side, creating a color gradient effect. Each line has a soft, glowing aura with a blur radius of approximately 15.9 pixels, producing a luminous halo effect characteristic of neon tubes. The lines are arranged in a fan-like pattern with varying angles, creating a sense of motion and energy radiating outward. The background is a very dark purple-black (#12091f), providing maximum contrast to make the neon lines pop. A subtle halftone texture overlay at 45 degrees adds a grainy, vintage quality to the effect. The overall atmosphere is cyberpunk and energetic, with the glow effect creating soft halos around each line that blend into the dark background. The lines appear to be falling or moving downward with a speed of 0.45, creating a sense of continuous motion. A paper texture with 0.65 roughness adds subtle surface irregularities and displacement, preventing the effect from appearing too clean or digital.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Circle,
  FallingLines,
  Glow,
  Halftone,
  Paper,
  PolarCoordinates,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Circle id="idmmksxe5fmdwqd736t" :center="{ x: 0, y: 1 }" :radius="1.05" :softness="0.47" />
    <SolidColor color="#12091f" />
    <PolarCoordinates :center="{ x: 0, y: 1 }" mask-source="idmmksxe5fmdwqd736t" mask-type="alphaInverted" :radius="0.6">
      <FallingLines color-a="#ce5ffc" color-b="#71bf27" color-space="oklab" :density="35" :speed="0.45" :speed-variance="0.55" />
    </PolarCoordinates>
    <Glow :intensity="3.5" :size="15.9" :threshold="0.2" />
    <Halftone blend-mode="overlay" :frequency="199" :smoothness="0" />
    <Paper :displacement="0.2" :grain-scale="1.6" :roughness="0.65" />
  </Shader>
</template>