Solar Silk 9

A sophisticated gradient shader effect featuring a horizontal linear gradient transitioning from warm coral-orange (#e85d3a) on the left through golden-yellow tones in the center to cool teal-blue (#1a6b8a) on the right. Overlaid on this gradient is a large, soft-edged circular shape with a turquoise-teal color (#2db89e) positioned in the upper-center area with significant blur and softness (0.59 softness value), creating a glowing orb effect. The circle has a subtle golden-orange stroke (#f2a93b) with minimal thickness. A glass morphism effect is applied with SVG-based shape masking, creating a frosted glass appearance with refraction (0.54), chromatic aberration (0.93), and fresnel highlights that enhance the three-dimensional quality. Wave distortion is subtly applied at 122-degree angle with sine wave pattern, creating gentle undulating ripples across the entire composition. The overall mood is serene and ethereal, with soft, blended transitions between color zones and a luminous quality enhanced by the glass effect's highlight and refraction properties. Film grain texture (0.2 strength) adds subtle noise throughout, while cursor ripples provide interactive responsiveness.

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="#e85d3a" color-b="#1a6b8a" :visible="true" />
    <Circle blend-mode="normal-oklch" :center="{ x: 0.48, y: 0.85 }" color="#2db89e" color-space="oklab" :radius="1.8" :softness="0.59" stroke-color="#f2a93b" :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>