Frosted Glass 7

A luminous gradient shader effect transitioning from cool light-blue tones in the upper left to vibrant yellow in the lower right. The composition features a soft swirl pattern with pale blue-white base colors (#ebf6ff, #d3e4f0) creating a misty, ethereal foundation. Overlaid is a bright yellow sine wave (#ffee00) positioned in the lower right quadrant, adding dynamic energy. A glass morphism effect with an SVG shape creates a frosted, refractive element in the center-right area with subtle chromatic aberration (0.64 intensity) and light refraction, producing a crystalline, translucent appearance. The glass shape has a soft edge with 0.05 softness and appears to magnify underlying content with 2x inner zoom. A fine film grain texture (0.3 strength) is applied across the entire composition, adding subtle noise and tactile quality. The overall mood is bright, optimistic, and modern with a soft focus aesthetic. The color space is linear P3, enhancing color vibrancy and smoothness. Spatial relationships show the glass element as a focal point in the center-right, with the yellow wave energy emanating from the lower portion, while the swirl base provides atmospheric depth throughout.

Code

vue

<script setup lang="ts">
import {
  Shader,
  FilmGrain,
  Glass,
  SineWave,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#ebf6ff" color-b="#d3e4f0" :detail="1.5" />
    <SineWave :amplitude="0.1" :angle="63" color="#ffee00" :frequency="0.6" :position="{ x: 0.6, y: 0.99 }" :softness="1" :thickness="0.9" />
    <Glass :aberration="0.64" :blur="20" :edge-softness="0.05" :fresnel="0.03" :fresnel-softness="1" :highlight="0" :highlight-softness="1" :inner-zoom="2" :light-angle="237" :refraction="2" shape-sdf-url="https://data.shaders.com/storage/v1/object/public/user-uploaded-images/user_33nh0FG48zZa0rIUZuK7vgwPfZe/3qJFWUS-Vtnm_sdf.bin" :thickness="0.03" />
    <FilmGrain :strength="0.3" />
  </Shader>
</template>