Shaders
header.lightDarkMode D
Gallery

A serene, ethereal shader composition featuring a gradient background that transitions from light gray-white at the top to vibrant cyan and turquoise tones at the bottom. The primary visual element is a large glass morphism shape positioned in the center, appearing as an organic, curved form with a frosted glass effect. The glass shape exhibits chromatic aberration with a subtle rainbow fringing (0.64 aberration value), creating iridescent edges. A bright cyan sine wave pattern emanates from the lower portion of the composition, creating a horizontal wave effect with soft, feathered edges. The overall atmosphere is calm and modern, with a subtle film grain texture overlay adding tactile quality. The glass element has a high refraction value (2.0) creating a distorted, magnifying effect of the background gradients visible through it. Light plays across the glass surface with fresnel effects and subtle highlights, while the composition maintains a dreamy, translucent quality throughout. The swirl component in the background provides soft, blended color transitions between cool tones.

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 color="#05ffea" :position="{ x: 0.49, y: 0.98 }" :softness="0.7" :thickness="0.4" />
    <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>