Shaders
header.lightDarkMode D
Gallery

A vibrant, dynamic gradient composition featuring soft-focus geometric shapes with intense color transitions. The image displays a layered blob-like structure with primary colors transitioning from deep purple (#57073c) and magenta tones in the upper regions, through bright yellow (#ffff00) in the center-left area, to cyan (#18eed6) and light-blue accents throughout. The shapes have smooth, organic edges with significant blur and glow effects creating a dreamy, ethereal quality. A bright yellow-to-purple gradient blob dominates the left-center area with soft highlights and 3D depth perception. Wave distortion effects create subtle undulating patterns across the surface, while chromatic aberration introduces slight color fringing at the edges of shapes. The overall composition has a screen blend mode glow overlay that intensifies the luminosity of brighter areas. Film grain texture adds subtle noise throughout. The spatial arrangement suggests layered depth with overlapping organic forms that appear to float and shift. The atmosphere is modern, energetic, and highly saturated with a psychedelic quality enhanced by the color space interpolation in LCH and OKLCH modes.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Blob,
  ChromaticAberration,
  FilmGrain,
  Glow,
  Swirl,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <FilmGrain :strength="0.15">
      <Glow blend-mode="screen" :intensity="0.14" :size="15" :threshold="0.35">
        <Swirl color-a="#57073c" color-b="#18eed6" color-space="lch" :detail="2.5" :speed="0.8" />
        <Blob :center="{ x: 0.38, y: 0.68 }" color-a="#ffff00" color-b="#6e00ff" color-space="oklch" :deformation="1" highlight-color="#ffffff" :highlight-intensity="0.8" :highlight-x="0.5" :highlight-y="-0.5" :highlight-z="0.8" :opacity="0.9" :seed="42" :size="0.85" :softness="3" :speed="1.2" :visible="true" />
        <WaveDistortion :angle="161" edges="mirror" :frequency="3.4" :speed="2.5" :strength="0.2" :visible="true" />
        <ChromaticAberration :angle="195" :blue-offset="1.5" :red-offset="-1.5" :strength="0.05" :visible="true" />
      </Glow>
    </FilmGrain>
  </Shader>
</template>