Shaders
header.lightDarkMode D
Gallery

A dynamic shader effect featuring a dark navy-black background (#0a0f12) with two prominent sine wave patterns creating an organic, flowing composition. The primary visual element is a vibrant green sine wave (#4a9e3d) positioned in the center-left area with high softness (0.62), creating a soft-edged, glowing appearance that dominates the composition. A secondary golden-tan sine wave (#c49a2e) is positioned in the upper-right quadrant with lower softness (0.42), creating a more defined edge. Both waves have animated motion with different speeds (0.3 and 0.5 respectively), creating a sense of fluid movement. The waves blend using OKLCH and OKLAB color spaces, producing subtle color transitions and gradients where they interact. A wave distortion effect with sine-type modulation (angle 52°, frequency 1.6) adds subtle rippling and warping across the entire composition, creating depth and movement. The overall effect is soft and atmospheric with a slight film grain overlay (strength 0.1) adding subtle texture and visual noise. The composition has a dreamy, ethereal quality with warm and cool color contrasts creating visual interest and depth.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0a0f12" />
    <SineWave :amplitude="0.52" :angle="77" blend-mode="normal-oklch" color="#4a9e3d" :frequency="0.35" :position="{ x: 0.38, y: 0.72 }" :softness="0.62" :speed="0.3" :thickness="0.95" />
    <SineWave :amplitude="0.29" :angle="144" blend-mode="normal-oklab" color="#c49a2e" :frequency="0.45" :position="{ x: 0.72, y: 0.33 }" :softness="0.42" :speed="0.5" :thickness="0.58" />
    <WaveDistortion :angle="52" edges="mirror" :frequency="1.6" :speed="0.2" :strength="0.45" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>