Solar Silk 6

A vibrant gradient shader effect transitioning horizontally from warm orange-red tones on the left (#e84a1c) through golden-yellow in the center to deep magenta-purple on the right (#8b1a5e). The composition features a prominent soft-edged circular glow positioned in the lower-left quadrant with a golden-orange color (#f5a623) that creates a warm luminous focal point. The circle has significant softness (0.59) creating a diffused halo effect that blends seamlessly into the background gradient. A subtle wave distortion with sine wave pattern (angle 122°, strength 0.3) creates gentle undulating ripples across the entire surface, adding organic movement and depth. The glass effect overlays an SVG-based geometric shape in the center with chromatic aberration (0.93) and refraction properties, creating a subtle prismatic quality with light refractions visible at approximately 300° angle. Interactive cursor ripples with chromatic split add responsive visual feedback. A fine film grain texture (strength 0.2) is applied uniformly across the composition, adding subtle noise and texture that prevents the gradients from appearing too smooth. The overall mood is energetic and modern with a warm-to-cool color temperature shift from left to right, creating visual depth and dimensionality.

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="#e84a1c" color-b="#8b1a5e" :visible="true" />
    <Circle blend-mode="normal-oklch" :center="{ x: 0.42, y: 0.85 }" color="#f5a623" color-space="oklab" :radius="1.8" :softness="0.59" stroke-color="#c4243b" :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>