Ribbon Flows 8

A smooth, flowing gradient shader effect with a predominantly purple color palette transitioning to warm yellow tones in the upper right corner. The composition features two elegant curved wave-like lines that flow diagonally from the upper left toward the center-right, creating a sense of motion and fluidity. The waves appear as subtle lighter streaks with soft, feathered edges against the deeper purple background. The overall aesthetic is soft and organic, with a gentle glow effect that creates depth and dimensionality. The gradient uses a diamond gradient pattern centered near the top-right, blending from deep purple (#7b1fa2) through mid-purple tones to warm golden-yellow (#ffd54f) highlights. A fine film grain texture is subtly applied across the entire surface, adding a slight noise pattern that enhances the organic, natural quality. The edges fade to transparency, and the lighting creates a luminous, almost ethereal atmosphere with smooth color transitions and no harsh boundaries. The effect suggests movement and energy while maintaining an elegant, sophisticated appearance.

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="73" :frequency="0.7" :softness="0.5" :speed="0.8" :thickness="0.5" :visible="false" />
    <DiamondGradient :center="{ type: 'mouse-position', reach: 0.2, originX: 1, originY: 0, momentum: 0.2, smoothing: 0.65 }" color-a="#ffd54f" color-b="#7b1fa2" 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.2" />
  </Shader>
</template>