Shaders
header.lightDarkMode D
Gallery

A dynamic neon shader effect featuring radiating lines emanating from a vanishing point at the bottom center of the composition. The lines are rendered with a gradient color transition from hot pink (#f2126e) on the left side to electric blue (#3e67f4) on the right side, creating a vibrant chromatic spread. The lines appear to be falling or moving downward with motion blur trails, giving a sense of rapid movement and energy. The effect is contained within a circular mask with soft edges that fades to transparency, creating a radial burst pattern. The background is a very dark purple-black (#12091f), providing maximum contrast for the neon elements. A strong glow effect is applied with high intensity (3.5) and a size of 15.9, creating luminous halos around each line that blend into the dark background. The overall composition has a cyberpunk aesthetic with a subtle halftone overlay pattern at 45 degrees and fine paper texture grain for added visual complexity. The lines vary in length and density (26 lines total), with approximately 35% trail length creating comet-like streaks. The effect conveys motion, energy, and a sense of data or light particles radiating outward from a central point.

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.5, y: 1 }" :radius="1.05" :softness="0.47" />
    <SolidColor color="#12091f" />
    <PolarCoordinates :center="{ x: 0.5, y: 1 }" mask-source="idmmksxe5fmdwqd736t" mask-type="alphaInverted">
      <FallingLines color-a="#f2126e" color-b="#3e67f4" :density="26" :speed="0.55" :speed-variance="0.55" />
    </PolarCoordinates>
    <Glow :intensity="3.5" :size="15.9" :threshold="0.2" />
    <Halftone blend-mode="overlay" :frequency="158" :smoothness="0" />
    <Paper :displacement="0.31" :grain-scale="2.5" :roughness="0.82" />
  </Shader>
</template>