Ribbon Flows 7

A serene, minimalist gradient shader effect featuring soft, flowing waves of pale green and white tones. The composition displays a gentle diamond gradient that transitions from a warm cream color (#fcf7e3) in the center to a soft sage green (#a6dbb2) at the edges. The effect creates an organic, fluid appearance with subtle wave-like distortions that suggest movement without being overtly dynamic. The gradient center is positioned slightly off-center, creating visual interest while maintaining a calm, meditative quality. A barely perceptible film grain texture (0.1 strength) adds subtle surface detail and prevents the gradient from appearing too smooth or artificial. The overall mood is tranquil and organic, with soft, diffused lighting that evokes natural elements like water or foliage. The sine wave component, though invisible in the final render, influences the diamond gradient's rotation through a mapped channel, creating subtle undulating variations in the gradient's orientation. The edges fade transparently into the background, creating a seamless, borderless aesthetic.

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="92" :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.5048034934497817, originY: 0.8610248447204969, momentum: 0.2, smoothing: 0.65 }" color-a="#fcf7e3" color-b="#a6dbb2" 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>