Swirling Gradient 8
Swirling GradientA fluid, organic gradient shader effect featuring smooth flowing waves and swirling patterns. The composition blends lime-yellow (#bdea3d) with mint-green (#50d180) colors, creating a vibrant yet harmonious transition. Vertical streaking lines flow diagonally across the canvas, creating a sense of motion and depth. The Swirl component generates smooth, undulating curves that ripple through the composition with a detail level of 1.2, producing soft, blended edges. The ConcentricSpin component adds concentric circular patterns emanating from the right side (center at x:1, y:0) with 9 rings rotating at -1.2 speed, creating subtle striations and depth layers. The Paper texture overlay adds fine grain and subtle displacement (0.15 intensity) with low roughness (0.2), giving the effect a slightly tactile, organic quality without overwhelming the smooth gradients. The overall atmosphere is calm and energetic, with a modern, minimalist aesthetic. The blend mode is normal throughout, maintaining color saturation and vibrancy. The effect suggests flowing liquid, wind patterns, or abstract natural phenomena with smooth transitions and no harsh edges.
Code
<script setup lang="ts">
import {
Shader,
ConcentricSpin,
Paper,
Swirl
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Swirl :blend="{ axis: 'x', type: 'mouse', momentum: 0.2, outputMax: 60, outputMin: 40, smoothing: 0.6 }" color-a="#bdea3d" color-b="#50d180" color-space="oklab" :detail="1.2" />
<ConcentricSpin :center="{ x: 1, y: 0 }" :rings="9" :smoothness="0.76" :speed="-1.2" :speed-randomness="0.14" />
<Paper :roughness="0.2" />
</Shader>
</template>