Ribbon Flows 2

A smooth, ethereal gradient shader effect dominated by purple and white tones. The composition features a soft radial gradient that transitions from a bright, pale cream-white center (#edf0bd) to deep purple edges (#470e92). The gradient is diamond-shaped with smooth, blurred edges that fade to transparency. Flowing wave-like curves with soft edges traverse the upper portion of the image, creating organic, undulating lines that add movement and fluidity. The overall effect has a luminous quality with a gentle glow emanating from the center, creating depth and dimension. A subtle film grain texture overlays the entire composition at low opacity (0.3), adding a fine, cinematic quality without overwhelming the smooth gradient. The wave component, though marked as not visible in the structure, appears to influence the rotation mapping of the diamond gradient, creating subtle directional flow. The color space uses OKLAB for smooth, perceptually uniform color transitions. The atmosphere is serene and meditative, with soft focus and atmospheric blur creating a dreamy, diffused quality. The spatial composition suggests light emanating from the upper-right area, with the gradient center positioned near the right side of the frame.

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.9510917030567686, originY: 0.875, momentum: 0.2, smoothing: 0.65 }" color-a="#edf0bd" color-b="#470e92" 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.3" />
  </Shader>
</template>