Shaders
header.lightDarkMode D
Gallery

A sophisticated gradient background transitioning from warm orange-yellow tones on the left side to cool light-blue and gray tones on the right side, creating a diagonal color shift. The center features a prominent white geometric shape with a curved left edge and straight right edge, resembling an abstract bracket or parenthesis. The shape has a glass-like quality with subtle refraction and chromatic aberration effects visible along its edges, creating a slight iridescent shimmer. A warm orange sine wave pattern runs horizontally across the lower portion of the composition at approximately 80% vertical position, adding a dynamic linear element. The entire composition is overlaid with fine film grain texture that adds subtle noise throughout. The glass element appears to have a frosted or translucent quality with soft edge blending, and the overall atmosphere is clean, modern, and minimalist with a soft, diffused lighting quality. The background gradient creates depth and the white shape appears to float above it with dimensional glass properties.

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="114" color="#ffa217" :frequency="0.6" :position="{ x: 0, y: 0.81 }" :softness="0.8" :thickness="1" />
    <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>