Shaders
header.lightDarkMode D
Gallery

A dynamic diagonal striped shader effect with a sophisticated color gradient flowing from left to right. The composition features parallel diagonal bands at approximately 45-degree angles, with vibrant magenta and purple hues concentrated on the left side that gradually transition to darker purples and deep blues toward the center, then fade to nearly black on the right. The leftmost stripes display bright magenta (#ff00ea) with blue undertones, creating a neon-like glow effect. The middle section shows rich purple tones (#7700ff, #3d0066) with smooth color transitions. The rightmost portion becomes progressively darker, approaching pure black (#000000, #0a0a0a). The effect incorporates a fluted glass refraction layer that creates subtle wave distortions and light refractions across the diagonal bands, giving the stripes a dimensional, glass-like quality with soft highlights. A chromatic flow effect adds directional color momentum, particularly visible in the magenta-to-purple transition zones. The overall atmosphere is modern and sleek with a cyberpunk aesthetic. Film grain is subtly applied across the entire surface, adding texture and reducing the purely digital appearance. The edges maintain transparency, allowing the effect to blend seamlessly. The lighting appears to come from a -90-degree angle, creating highlights that enhance the dimensional quality of the fluted glass effect.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#000000" color-b="#0a0a0a" :detail="1.7" />
    <ChromaFlow base-color="#18181a" down-color="#1a0033" left-color="#7700ff" :momentum="13" right-color="#3d0066" up-color="#ff00ea" />
    <FlutedGlass :aberration="0.61" :angle="214" :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>