Solar Silk

Open in editor

A sophisticated gradient shader effect featuring a horizontal linear gradient transitioning from muted blue-gray (#89a3ae) on the left to vibrant cobalt blue (#1c79eb) on the right. Overlaid on this base is a prominent circular element with a purple hue (#ae6dfe) positioned in the lower-left quadrant, featuring soft edges with 0.59 softness creating a glowing orb effect. The circle has a subtle yellow stroke (#f1dd0f) at its perimeter. A glass morphism effect is applied centrally with an SVG-based rounded square shape, creating a frosted glass appearance with chromatic aberration (0.93 intensity) and refraction (0.54 strength), producing iridescent light bending and subtle rainbow color fringing at the edges. Wave distortion at 122 degrees with sine wave pattern adds subtle undulating movement to the composition. The overall atmosphere is ethereal and modern, with soft bokeh-like quality from the glass effect and gentle wave animations. Film grain texture (0.2 strength) adds subtle noise throughout. Cursor ripples with chromatic split create interactive water-like distortions. The color palette blends cool blues and purples with warm peachy-pink tones in the gradient transitions, creating a dreamy, contemporary aesthetic with 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="#89a3ae" color-b="#1c79eb" :visible="true" />
    <Circle blend-mode="normal-oklch" :center="{ x: 0.36, y: 0.85 }" color="#ae6dfe" color-space="oklab" :radius="1.8" :softness="0.59" stroke-color="#f1dd0f" :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>