Ribbon Flows 5

A serene, abstract shader effect featuring smooth, flowing gradients in cool tones. The composition displays a diamond gradient that transitions from light cyan (#98cfeb) in the upper-left and center areas to deeper teal-blue (#467c87) in the lower-right regions. The gradient creates a soft, luminous quality with gentle curved wave patterns flowing diagonally across the canvas, suggesting fluid motion. The effect has a subtle, organic feel with soft edges and smooth transitions between color zones. A fine film grain texture is overlaid throughout, adding subtle visual noise and depth without disrupting the overall smoothness. The lighting appears to emanate from the upper-center area, creating a gentle glow effect. The overall atmosphere is calm, ethereal, and meditative, with no sharp edges or harsh contrasts. The wave component, though set to invisible, influences the rotation mapping of the gradient, creating subtle directional flow patterns. The composition maintains perfect symmetry around the center point with soft, feathered edges that fade to transparency at the boundaries.

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="152" :frequency="0.7" :position="{ x: 0.72, y: 0.81 }" :softness="0.5" :speed="0.8" :thickness="0.5" :visible="false" />
    <DiamondGradient :center="{ type: 'mouse-position', reach: 0.2, originX: 0.5, originY: 0.5, momentum: 0.2, smoothing: 0.65 }" color-a="#98cfeb" color-b="#467c87" color-space="hsl" :rotation="{ type: 'map', curve: 1, source: 'idmnwkl123sccj082v5', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 360, outputMin: 0 }" :size="1.04" />
    <FilmGrain :strength="0.3" />
  </Shader>
</template>