Dot Gradient 5
Dot GradientA smooth, diagonal gradient shader transitioning from deep purple (#5c2b80) in the upper left to warm coral-orange (#e36750) in the lower right. The gradient flows at a 141-degree angle across the canvas with soft, blended color transitions. Overlaid on this base gradient is a subtle sine wave distortion effect at 26 degrees with moderate strength (0.45), creating gentle undulating ripples that slightly warp the color transitions without dramatically disrupting them. The wave effect adds organic movement and fluidity to the otherwise static gradient. Scattered across the entire composition is a fine dot grid pattern with high density (30), featuring small bright yellow-green dots (#d8fa2d) that twinkle with varying opacity. These dots are blended using linear dodge mode, creating a luminous, glowing effect that makes them appear to shimmer and stand out against the warm gradient background. The overall atmosphere is cosmic and ethereal, with the twinkling dots suggesting a starfield or particle effect. The composition has a modern, digital aesthetic with smooth color gradients and subtle motion implied by the wave distortion.
Code
<script setup lang="ts">
import {
Shader,
DotGrid,
LinearGradient,
WaveDistortion
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<LinearGradient :angle="141" color-a="#e36750" color-b="#5c2b80" color-space="oklab" :end="{ x: 0.93, y: 0.85 }" :start="{ x: 0.05, y: 0.27 }" />
<WaveDistortion :angle="26" :frequency="0.6" :strength="0.45" />
<DotGrid blend-mode="linearDodge" color="#d8fa2d" :dot-size="0.05" :twinkle="1" />
</Shader>
</template>