Synthesis 8

A dynamic gradient shader effect featuring a dark navy/black base (#08071a) overlaid with two animated sine wave components creating diagonal flowing bands. The primary orange sine wave (#e85a05) flows at a 77-degree angle from the lower-left toward upper-right, positioned at coordinates (0.38, 0.72) with soft edges and moderate amplitude creating a glowing ribbon effect. A secondary magenta/hot pink sine wave (#f00e4a) intersects at a steeper 144-degree angle from upper-left to lower-right, positioned at (0.73, 0.32) with higher amplitude creating a more pronounced wave distortion. Both waves blend using advanced color space modes (oklch and oklab) producing smooth color transitions where they overlap. A wave distortion effect at 45 degrees with sine waveform adds subtle undulating warping across the entire composition, creating depth and movement. The overall effect is enhanced by subtle film grain noise at 10% strength, giving the smooth gradients a slightly textured, analog quality. The composition creates a sense of flowing energy with warm orange tones dominating the left-center area and cool magenta-pink tones prominent in the upper-right, with purple transition zones where colors blend. The blur and soft edges create an ethereal, atmospheric quality suggesting motion and fluidity.

<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.55" :angle="77" blend-mode="normal-oklch" color="#e85a05" :frequency="0.35" :position="{ x: 0.38, y: 0.72 }" :softness="0.42" :speed="0.3" :thickness="1.1" />
    <SineWave :amplitude="0.8" :angle="144" blend-mode="normal-oklab" color="#f00e4a" :frequency="0.45" :position="{ x: 0.73, y: 0.32 }" :softness="0.36" :speed="0.5" :thickness="0.62" />
    <WaveDistortion :angle="45" edges="mirror" :frequency="1.2" :speed="0.2" :strength="0.55" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>