Shaders
header.lightDarkMode D
Gallery

A flowing, organic gradient shader effect dominated by vibrant magenta and purple tones. The image displays smooth, wave-like distortions that create a sense of liquid motion across the entire frame. The primary colors transition fluidly between hot magenta (#df5eff, #ea05ff), deep purple (#6a0899), and bright neon magenta (#ee35ff). The distortion parameter of 0.8 creates undulating, fabric-like ripples that flow diagonally across the composition, giving the effect a three-dimensional, silk-like appearance. A subtle halftone overlay with CMYK color separation is applied at 20% opacity with an overlay blend mode, adding fine texture and a print-like quality to the smooth gradient base. The halftone pattern at 180 frequency is barely perceptible but adds microscopic detail and visual complexity. The edges fade to transparency, creating a soft vignette effect. The overall mood is energetic and ethereal, with a modern, digital aesthetic that suggests movement and fluidity. The color space uses oklab for smooth interpolation between the magenta and purple hues, resulting in natural-looking transitions without banding.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <FlowingGradient color-a="#df5eff" color-b="#ea05ff" color-c="#6a0899" color-d="#ee35ff" color-space="oklab" :distortion="0.8" :seed="57" />
    <Halftone blend-mode="overlay" :frequency="180" :opacity="0.2" style="cmyk" />
  </Shader>
</template>