Shaders
header.lightDarkMode D
Gallery

A modern, minimalist shader effect featuring diagonal parallel lines or stripes running from upper-left to lower-right at approximately 45-degree angles. The composition consists of approximately 10-12 evenly-spaced white and light gray stripes with soft edges and subtle depth. A vibrant blue-to-purple gradient glow emanates from the center-right area, creating a focal point of chromatic intensity. The glow transitions from cyan on the left edge through bright blue in the center to deep purple on the right, with a soft blur radius of approximately 3.5 pixels. The effect has a frosted or fluted glass appearance with subtle wave distortions and refractive qualities, creating a sense of depth and dimensionality. Fine film grain texture is subtly overlaid across the entire composition, adding a slight noise quality. The overall atmosphere is clean, contemporary, and ethereal, with a light, airy quality. The background remains predominantly white and neutral, allowing the blue-purple chromatic flow to stand out as the primary visual interest. The lighting appears to come from a -90 degree angle, creating subtle highlights along the ridge edges of the fluted pattern.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#ffffff" color-b="#f0f0f0" :detail="1.7" />
    <ChromaFlow base-color="#ffffff" down-color="#4642ff" left-color="#56c2fc" :momentum="13" :radius="3.5" right-color="#5b4fff" up-color="#7f66ff" />
    <FlutedGlass :aberration="0.61" :angle="31" :frequency="8" :highlight="0.12" :highlight-softness="0" :light-angle="-90" :refraction="4" shape="rounded" :softness="1" :speed="0.15" />
    <FilmGrain :strength="0.05" />
  </Shader>
</template>