Solar Silk 7

A serene, minimalist shader effect featuring a soft gradient background transitioning from light blue (#b8d4e3) on the left to deeper blue (#5491bf) on the right. The composition is dominated by a large, softly blurred circular form centered slightly off-center (at coordinates 0.42, 0.84921875) with a muted blue-gray color (#9bb5d4). The circle has significant softness (0.59 blur) creating a gentle, diffused glow effect with a subtle stroke outline in pale purple (#c9b8d9). The overall atmosphere is calm and ethereal, enhanced by subtle wave distortions (sine wave at 122 degrees with 0.3 strength) that create gentle undulations across the entire surface. A fine film grain texture (0.2 strength) adds subtle noise and tactile quality. Interactive cursor ripples with chromatic aberration effects are present but subtle. A glass effect with refraction (0.54), aberration (0.93), and fresnel properties creates a luminous, translucent quality with soft highlights. The lighting angle at 300 degrees produces gentle specular highlights. The overall mood is tranquil, meditative, and slightly ethereal with soft, rounded forms and smooth color transitions.

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="#b8d4e3" color-b="#5491bf" :visible="true" />
    <Circle blend-mode="normal-oklch" :center="{ x: 0.42, y: 0.85 }" color="#9bb5d4" color-space="oklab" :radius="1.8" :softness="0.59" stroke-color="#c9b8d9" :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>