Solar Silk 5

A soft, dreamy gradient background transitioning from warm peachy-beige tones on the left (#fce4cd) to cool mint-green on the right (#d4e9c4). The composition features a prominent soft-edged circular glow centered slightly right and lower in the frame, rendered in light blue (#b0d8f4) with significant feathering (59% softness). This circular element creates a luminous focal point with subtle chromatic depth. Overlaid on the composition is a geometric glass-morphism shape featuring a chevron or arrow-like form pointing rightward, positioned in the center-upper portion of the canvas. The glass element exhibits refraction distortion (0.54 intensity), chromatic aberration (0.93), and subtle fresnel highlights creating a translucent, crystalline appearance. The entire scene is subtly animated with wave distortion applied at a 122-degree angle with sine wave characteristics, creating gentle undulating movement. A fine film grain texture (0.2 strength) adds subtle noise throughout, enhancing the organic quality. Interactive cursor ripples with chromatic splitting provide dynamic responsiveness. The overall mood is ethereal, modern, and calming with a contemporary glassmorphism aesthetic blending soft organic gradients with geometric glass elements.

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="#fce4cd" color-b="#d4e9c4" :visible="true" />
    <Circle blend-mode="normal-oklch" :center="{ x: 0.62, y: 0.83 }" color="#b0d8f4" color-space="oklab" :radius="1.8" :softness="0.59" stroke-color="#1c90f7" :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>