Ribbon Flows 4

A sophisticated abstract shader effect featuring smooth, flowing wave-like forms rendered in deep blue and purple tones. The composition displays elegant curved lines that sweep diagonally across the frame from upper left to lower right, creating a sense of fluid motion and depth. The primary visual element is a diamond gradient that transitions from a vibrant purple (#726df3) at the center to a very dark navy blue (#01122a) at the edges, creating a radial glow effect. The waves appear semi-transparent with soft, feathered edges that blend seamlessly into the dark background. A subtle film grain texture overlays the entire composition, adding a cinematic quality and preventing the image from appearing too smooth or artificial. The lighting creates a luminous quality where the purple gradient appears to emit a soft glow, with the brightest areas concentrated in the upper-left quadrant. The overall atmosphere is moody, elegant, and technological, with smooth interpolation between color values creating a seamless, high-quality appearance. The effect suggests flowing energy or liquid movement frozen in time, with excellent depth perception created through opacity variations and color gradation.

Code

vue

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SineWave id="idmnwkl123sccj082v5" :amplitude="0.1" :angle="196" :frequency="0.7" :position="{ x: 0.51, y: 0.81 }" :softness="0.5" :speed="0.8" :thickness="0.5" :visible="false" />
    <DiamondGradient :center="{ type: 'mouse-position', reach: 0.2, originX: 0.4192139737991266, originY: 0.18711180124223603, momentum: 0.2, smoothing: 0.65 }" color-a="#726df3" color-b="#01122a" color-space="oklab" :rotation="{ type: 'map', curve: 1, source: 'idmnwkl123sccj082v5', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 360, outputMin: 0 }" :size="1.04" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>