Frosted Glass 14
Frosted GlassA modern, fluid shader effect featuring layered blue and white diagonal wave patterns with a glossy glass morphism aesthetic. The background consists of soft, blurred sine waves in bright blue (#0e6aff) at approximately 107-degree angles, creating dynamic diagonal streaks across the composition. These waves have a thickness of 1.6 units with 0.3 softness, producing feathered edges that blend smoothly. Overlaying this is a swirl component with light colors (#ebf6ff to #d3e4f0) that adds subtle turbulence and depth. The centerpiece is a glass-effect shape with significant refraction (2.0) and chromatic aberration (0.64), creating a magnifying lens effect with a 20-unit blur. The glass element has a thin 0.03 thickness with a fresnel effect at 0.03 intensity, producing subtle edge highlights in white. A light angle of 237 degrees creates dimensional lighting across the glass surface. Fine film grain (0.3 strength) is applied across the entire composition in normal blend mode, adding texture and reducing the clinical smoothness. The overall mood is sleek, contemporary, and tech-forward with a cool color temperature dominated by blues and whites against a light background.
Code
<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.5" :angle="107" color="#0e6aff" :frequency="4" :position="{ x: 1, y: 0 }" :softness="0.3" :thickness="1.6" />
<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>