Shaders
header.lightDarkMode D
Gallery

A dynamic neon shader effect featuring radial lines emanating from a vanishing point at the top-center of the composition, creating a sense of forward motion and depth. The primary visual elements are thin, glowing lines arranged in a starburst pattern that converge toward the center. The color palette consists of vibrant neon red (#ff2400) and cyan (#00e5ff) lines with intermediate warm white and pale orange tones, creating a striking contrast against the deep dark-blue to near-black background (#040a14). The lines appear to be falling or moving downward with motion blur trails, giving the effect a sense of speed and direction. A soft white circular gradient mask is applied from the top, creating a vignette effect that softens the edges and focuses attention toward the center. The entire composition is enhanced with a strong glow effect (size 10.4, intensity 1.1) that creates halos around the bright neon lines, making them appear to emit light. A subtle halftone overlay pattern (162 frequency, 45-degree angle) adds texture and a print-like quality. Fine paper grain texture with high roughness (0.95) and displacement (0.22) provides subtle surface irregularity. The polar coordinate transformation warps the falling lines into this radial pattern, with the effect masked by an inverted alpha channel to create the starburst appearance. The overall mood is cyberpunk, energetic, and futuristic with a strong sense of motion and technological aesthetic.

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: 0 }" :radius="1.05" :softness="0.47" />
    <SolidColor color="#040a14" />
    <PolarCoordinates :center="{ x: 0.5, y: 0 }" mask-source="idmmksxe5fmdwqd736t" mask-type="alphaInverted" :radius="0.7">
      <FallingLines color-a="#ff2400" color-b="#00e5ff" color-space="oklab" :density="35" :speed="0.25" :speed-variance="0.55" />
    </PolarCoordinates>
    <Glow :intensity="1.1" :size="10.4" :threshold="0.2" />
    <Halftone blend-mode="overlay" :frequency="162" :smoothness="0" />
    <Paper :displacement="0.22" :grain-scale="3" :roughness="0.95" />
  </Shader>
</template>