Shaders
header.lightDarkMode D
Gallery

A dynamic abstract shader effect featuring a dark navy background (#08071a) with two prominent sine wave elements creating flowing, organic patterns. A vibrant purple/magenta wave (#a305e8) positioned in the upper right area flows at an angle of 144 degrees with soft edges and a thickness of 1.46, creating a glowing, blurred stroke effect. A bright neon green wave (#05e862) emerges from the lower left at a 77-degree angle with more defined edges and lower softness (0.38), creating a sharper, more energetic line. Both waves exhibit smooth, undulating motion with wave distortion applied across the entire composition at 45 degrees, creating a subtle rippling effect that adds depth and movement. The waves blend using perceptually uniform color spaces (oklch and oklab) which creates smooth color transitions and a modern, vibrant aesthetic. A fine film grain texture (strength 0.12) is subtly overlaid across the entire image, adding subtle noise and texture. The overall effect is a high-contrast, neon-lit abstract composition with a sense of motion and energy, reminiscent of digital art, music visualization, or modern UI design elements. The blur and softness create a dreamy, ethereal quality while maintaining sharp color definition.

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="1.3" :angle="144" blend-mode="normal-oklch" color="#a305e8" :frequency="0.3" :position="{ x: 0.82, y: 0.18 }" :softness="0.72" :speed="0.3" :thickness="1.46" />
    <SineWave :amplitude="0.85" :angle="77" blend-mode="normal-oklab" color="#05e862" :frequency="0.5" :position="{ x: 0.15, y: 0.82 }" :softness="0.38" :speed="0.5" :thickness="1.1" />
    <WaveDistortion :angle="45" edges="mirror" :frequency="2.4" :speed="0.2" :strength="0.55" />
    <FilmGrain :strength="0.12" />
  </Shader>
</template>