Frosted Glass

A sophisticated gradient background transitioning from light periwinkle at the top to deep blue at the bottom, creating a serene atmospheric effect. The composition features a glass morphism effect with a frosted, translucent quality applied to geometric shapes - specifically a rounded rectangular form at the top and a larger curved/arc-shaped element in the center-right area. These glass elements have a subtle blur effect (approximately 20px) with chromatic aberration creating slight color fringing at the edges. The glass shapes exhibit a frosted appearance with minimal transparency, allowing the gradient background to show through while maintaining distinct shape boundaries. A sine wave pattern in bright blue (#1755ff) flows horizontally across the lower portion, adding subtle wave-like distortion. Fine film grain texture overlays the entire composition at low opacity (0.3), providing subtle texture and reducing the smoothness of the gradient. The overall mood is clean, modern, and minimalist with a cool color temperature. The spatial arrangement creates depth through layering of semi-transparent elements, with the glass effect creating a sense of dimensional separation from the background gradient.

<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" color="#1755ff" :frequency="0.6" :position="{ x: 0.5, y: 1 }" :softness="1" :thickness="0.7" />
    <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>