Solar Silk 3

A smooth, flowing gradient shader effect with a soft, dreamlike quality. The composition features a horizontal linear gradient transitioning from cyan (#83eac5) on the left through soft peachy-pink tones in the center to vibrant magenta (#f4327f) on the right. Overlaid on this base is a prominent purple circular element (#a833b1) positioned in the lower-left quadrant with significant softness (0.59 blur), creating a glowing orb effect that bleeds into the surrounding gradient. The entire composition is affected by a subtle wave distortion (122-degree angle, sine wave at 0.3 strength) that creates gentle undulating ripples across the surface, giving it an organic, fluid appearance. A glass morphism effect with SVG-based shape overlay adds dimensional depth with chromatic aberration (0.93) and refraction (0.54), creating subtle light refractions and edge highlights. Fine film grain texture (0.2 strength) adds subtle noise throughout, enhancing the tactile quality. Cursor ripple effects with chromatic split provide interactive responsiveness. The overall mood is ethereal and contemporary, with soft, blurred edges and a pastel-to-vibrant color palette that suggests movement and fluidity.

Code

vue

<script setup lang="ts">
import {
  Shader,
  Circle,
  CursorRipples,
  FilmGrain,
  Glass,
  LinearGradient,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#83eac5" color-b="#f4327f" :visible="true" />
    <Circle blend-mode="normal-oklch" :center="{ x: 0.36, y: 0.85 }" color="#a833b1" color-space="oklab" :radius="1.8" :softness="0.59" stroke-color="#d9bd4d" :stroke-thickness="0.2" />
    <WaveDistortion :angle="122" :speed="3.7" />
    <CursorRipples :decay="20" :intensity="20" :radius="1" />
    <FilmGrain :strength="0.2" />
    <Glass :aberration="0.93" :edge-softness="0.4" :inner-zoom="2" :refraction="0.54" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/EFaVkr2x3OsR_sdf.bin" :thickness="0.14" />
  </Shader>
</template>