Shaders
header.lightDarkMode D
Gallery

A sophisticated shader effect featuring diagonal parallel ridges or fluted surfaces that create a sense of depth and movement. The composition uses a gradient transition from deep blue (#4b6abd) on the left side to pure white (#f5f5f5) on the right side. The fluted glass component creates prominent wave-like vertical striations at approximately 138 degrees, with a frequency of 11 ridges creating a rhythmic pattern across the entire image. The ridges have a glossy, reflective quality with subtle highlights rendered in white, suggesting light refraction across curved glass surfaces. The effect includes chromatic aberration (0.3) that adds a slight iridescent quality to the edges of the ridges. The overall mood is clean, modern, and professional with a soft, luminous quality. The waves appear to flow diagonally from upper left to lower right, creating a sense of dynamic motion despite the static speed setting. The softness parameter of 1 creates smooth transitions between the ridged surfaces, avoiding harsh edges. The mirror edge setting creates seamless continuity at the boundaries. The highlight intensity of 2 creates pronounced bright spots along the ridge peaks, enhancing the three-dimensional appearance and suggesting a light source positioned at -90 degrees (from above).

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#4b6abd" color-b="#f5f5f5" :detail="2" />
    <FlutedGlass :aberration="0.3" :angle="138" :frequency="11" :highlight="2" :highlight-softness="0.11" :light-angle="-90" :refraction="3.37" shape="waves" :softness="1" :wave-amplitude="0.1" :wave-frequency="0.5" />
  </Shader>
</template>