Shaders
header.lightDarkMode D
Gallery

A dynamic gradient shader effect featuring a dark navy-black background (#08071a) with two prominent sine wave overlays creating a flowing, aurora-like appearance. A purple wave (#7e05e8) originates from the upper left at approximately 77 degrees, featuring soft edges with 0.55 softness and moderate amplitude (0.36), creating a thick glowing band (0.72 thickness) that sweeps diagonally across the composition. A bright neon green wave (#0ef04a) flows horizontally from the center-right area at 0 degrees with lower amplitude (0.17) and thickness (0.53), creating a more subtle luminous streak. Both waves blend using advanced color space blending modes (oklch and oklab respectively), producing smooth color transitions and a three-dimensional depth effect. A wave distortion effect at 241 degrees with sine wave pattern adds subtle undulation and movement to the entire composition. The overall effect resembles a northern lights or plasma phenomenon with soft, glowing gradients that fade from vibrant neon colors into the dark background. Film grain texture (0.07 strength) adds subtle noise and organic texture throughout. The spatial composition creates a sense of motion and energy flowing diagonally from upper-left to lower-right, with the green and purple colors creating complementary contrast against the near-black background.

Code

vue
<script setup lang="ts">
import {
  Shader,
  FilmGrain,
  SineWave,
  SolidColor,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#08071a" />
    <SineWave :amplitude="0.36" :angle="77" blend-mode="normal-oklch" color="#7e05e8" :frequency="0.2" :position="{ x: 0.22, y: 0.27 }" :softness="0.55" :speed="0.3" :thickness="0.72" />
    <SineWave :amplitude="0.17" blend-mode="normal-oklab" color="#0ef04a" :frequency="0.2" :position="{ x: 0.6, y: 0.51 }" :softness="0.51" :speed="0.5" :thickness="0.53" />
    <WaveDistortion :angle="241" :frequency="0.5" :speed="0.2" :strength="1" />
    <FilmGrain :strength="0.07" />
  </Shader>
</template>