Shaders
header.lightDarkMode D
Gallery

A fluid, abstract gradient composition featuring soft-edged organic shapes with heavy blur and motion effects. The image is dominated by a dark navy-black background (#08071a) that serves as the foundation. An orange wave (#e85d05) emerges from the lower-left quadrant at a 77-degree angle, creating a thick, soft-edged form with significant blur and transparency. This orange element has a glowing, diffused quality with amplitude-based undulation. A bright blue wave (#0547e8) flows from the upper-right area at a 144-degree angle, creating a complementary contrast. Both waves exhibit sine-wave distortion patterns with high softness values (0.42 and 0.62), resulting in feathered, cloud-like edges rather than sharp boundaries. The wave distortion effect at 135 degrees with sine waveform adds additional fluidity and motion blur to the composition. A subtle film grain texture (0.1 strength) overlays the entire image, adding fine detail and reducing the smoothness. The blending modes (normal-oklch and normal-oklab) create smooth color transitions where the orange and blue elements interact, producing purple and magenta tones in the overlap regions. The overall effect is dreamlike and atmospheric, with a sense of flowing, undulating motion frozen in time. The composition has a strong sense of depth created by the soft focus and layering of the wave elements.

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.52" :angle="77" blend-mode="normal-oklch" color="#e85d05" :frequency="0.35" :position="{ x: 0.38, y: 0.32 }" :softness="0.42" :speed="0.3" :thickness="0.95" />
    <SineWave :amplitude="0.28" :angle="144" blend-mode="normal-oklab" color="#0547e8" :frequency="0.45" :position="{ x: 0.72, y: 0.68 }" :softness="0.62" :speed="0.5" :thickness="0.58" />
    <WaveDistortion :angle="135" edges="mirror" :frequency="1.6" :speed="0.2" :strength="0.45" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>