Shaders
header.lightDarkMode D
Gallery

A dark, atmospheric shader effect dominated by vertical scan lines creating a striped pattern across the entire composition. The left two-thirds of the image is nearly pure black with subtle vertical line texture. The right third features a chromatic aberration effect with vibrant neon colors flowing vertically - primarily magenta (#ff00aa), purple (#6600ff), and pink (#ff0066) hues creating a glowing, diffused light source. The colors blend and fade with soft edges, creating a bokeh-like glow effect that appears to move or pulse. The ChromaFlow component generates directional color momentum with the upColor magenta, downColor purple, and rightColor pink creating a tri-color gradient that bleeds and refracts across the vertical lines. The FlutedGlass layer adds subtle wave distortion and refraction with chromatic aberration (0.61 intensity), creating a glass-like quality with light bending effects. The overall mood is cyberpunk and neon-noir, with high contrast between the dark base and the luminous color gradients. Film grain adds subtle texture throughout. The effect suggests movement or energy concentrated on the right side, with the vertical lines emphasizing a sense of digital scanning or data flow.

Code

vue
<script setup lang="ts">
import {
  Shader,
  ChromaFlow,
  FilmGrain,
  FlutedGlass,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#000000" color-b="#0a0a0a" :detail="1.7" />
    <ChromaFlow base-color="#18181a" down-color="#6600ff" left-color="#aa00ee" :momentum="13" right-color="#ff0066" up-color="#ff00aa" />
    <FlutedGlass :aberration="0.61" :frequency="8" :highlight="0.12" :highlight-softness="0" :light-angle="-90" :refraction="4" shape="rounded" :softness="1" :speed="0.15" />
    <FilmGrain :strength="0.05" />
  </Shader>
</template>