Ribbon Flows

Open in editor

A smooth, flowing gradient shader effect dominated by warm tones transitioning from orange on the left to deep red on the right. The composition features soft, organic curved lines that sweep diagonally across the canvas, creating a sense of fluid motion and depth. The gradient uses a diamond gradient component with mouse-position tracking, creating a dynamic focal point that shifts based on interaction. The color palette transitions smoothly through coral and salmon tones in the midtones, with the warmest orange hues concentrated on the lower left quadrant and the deepest reds in the upper right. A subtle film grain texture overlays the entire composition at moderate opacity (0.3), adding a fine, cinematic quality that prevents the gradient from appearing too smooth or artificial. The edges are soft and feathered, with no hard boundaries, creating an ethereal, atmospheric quality. The overall mood is warm, energetic, and slightly dramatic, with the flowing curves suggesting movement and vitality. The lighting appears to emanate from within the gradient itself, creating a self-illuminated appearance without visible light sources.

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="104" :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.09694323144104804, originY: 1, momentum: 0.2, smoothing: 0.65 }" color-a="#f4509d" color-b="#de2a19" 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>