Shaders
header.lightDarkMode D
Gallery

A dynamic shader effect displaying six vertical light streaks arranged diagonally across a dark background with diagonal line patterns. The central four streaks are the brightest, featuring a vibrant lime-green to yellow-green gradient (#55ff00 to #f2ff00) with soft, glowing blur effects that create a volumetric light appearance. The outer streaks transition through orange and red tones, fading into the black background. Each streak exhibits a fluted glass refraction effect with subtle wave distortions and chromatic aberration, creating a prismatic quality. The light rays have rounded, soft edges with highlights that suggest directional lighting from above-left. A fine film grain texture overlays the entire composition, adding subtle noise. The diagonal rain-like line pattern in the background creates depth and movement, while the overall mood is modern, energetic, and tech-forward with a neon aesthetic. The glow halos around the central bright streaks suggest momentum and motion blur effects.

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="#f2ff00" left-color="#11ff00" :momentum="13" right-color="#d2ff61" up-color="#55ff00" />
    <FlutedGlass :aberration="0.61" :angle="28" :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>