Shaders
header.lightDarkMode D
Gallery

A dynamic shader effect featuring a dark navy background (#0a1929) with two prominent animated sine wave components creating flowing, organic shapes. A cyan/light-blue wave (#00d9ff) positioned in the upper-left area flows at an angle of 144 degrees with moderate softness (0.55) and amplitude, creating a smooth, glowing ribbon effect. A vibrant magenta/pink wave (#ff006e) positioned in the lower-right area flows horizontally with higher amplitude (1.3) and softness (0.72), creating a thicker, more diffused band of color. Both waves are in constant motion with opposing speeds (-0.7 and 0.5 respectively), creating a sense of fluid, undulating movement. A subtle wave distortion effect with sine wave pattern at 228 degrees adds a gentle rippling quality to the entire composition, creating depth and movement. Fine film grain texture (0.12 strength) overlays the entire image, adding a subtle noise pattern that enhances the cinematic quality. The overall effect is a modern, tech-forward aesthetic with soft, blurred edges and a dreamy, atmospheric quality. Colors blend smoothly with normal blend mode, creating areas where cyan and magenta interact, producing subtle color shifts in the overlapping regions.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0a1929" />
    <SineWave :amplitude="1.1" :angle="144" color="#00d9ff" :frequency="0.52" :position="{ x: 0.25, y: 0.75 }" :softness="0.55" :speed="-0.7" :thickness="1.08" />
    <SineWave :amplitude="1.3" color="#ff006e" :frequency="0.48" :position="{ x: 0.75, y: 0.25 }" :softness="0.72" :speed="0.5" :thickness="1.46" />
    <WaveDistortion :angle="228" edges="mirror" :frequency="2.4" :speed="0.1" :strength="0.18" />
    <FilmGrain :strength="0.12" />
  </Shader>
</template>