Shaders
header.lightDarkMode D
Gallery

A dynamic shader effect displaying diagonal streaks of vibrant neon light against a pure black background. The composition features four primary light beams angled from upper-left to lower-right at approximately 45 degrees. The leftmost beam transitions from deep magenta (#ff2a6d) through purple and blue tones, creating a chromatic gradient. The central beams display bright lime-green (#39ff14) and cyan-green hues with soft glowing edges and subtle blur. The rightmost beam shows yellow-green coloration fading toward the edges. Each beam exhibits a fluted glass refraction effect with subtle wave distortions and chromatic aberration, creating a sense of depth and dimensionality. The light streaks have soft, feathered edges that blur into the black background, with a gentle glow halo surrounding each beam. Fine film grain texture is subtly applied across the entire composition, adding a cinematic quality. The overall effect suggests high-speed motion or energy flow, with the ChromaFlow component creating directional color shifts from magenta on the left to green on the right. The FlutedGlass effect adds optical refraction and light bending characteristics, while the Swirl component provides underlying dark texture variation. The lighting appears to come from multiple angles, creating highlights and subtle reflections within each beam.

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="#05ffa1" left-color="#d100ff" :momentum="13" right-color="#39ff14" up-color="#ff2a6d" />
    <FlutedGlass :aberration="0.61" :angle="250" :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>