Oil Slick

Open in editor

A smooth, ethereal gradient shader effect that transitions from turquoise/cyan in the upper left corner to warm peachy-orange tones in the upper right, then flows downward through pink and mauve hues toward the bottom right, with subtle purple and blue undertones in the lower portion. The effect features a soft, blurred progressive gradient with a focal point of intense color saturation in the upper right quadrant (around 75% horizontal, 25% vertical) that gradually diffuses outward. The film grain overlay adds subtle texture throughout, creating a slightly grainy, analog quality. There are soft, organic blob-like color shifts with gentle wave distortions that create a fluid, liquid-like appearance. The overall mood is dreamy and atmospheric, with smooth color transitions that suggest movement and flow. The swirl component creates subtle color mixing in the OKLCH color space, blending blue, amber, and teal hues. A secondary blob element with pink-to-teal gradient adds depth and dimension, with a cyan highlight creating a three-dimensional quality. Wave distortions at 134 degrees add gentle undulation without harsh disruption, maintaining the serene, meditative aesthetic.

Code

vue

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <FilmGrain :animated="0" :strength="0.75">
      <ProgressiveBlur :angle="135" :center="{ x: 0.75, y: 0.25 }" :falloff="0.45" :intensity="2250">
        <Swirl :blend="65" :coarse-x="50" :coarse-y="50" color-a="#2563eb" color-b="#f59e0b" color-c="#10b981" color-space="oklch" :complexity="5.5" :detail="1.2" :fine-x="50" :fine-y="50" :medium-x="50" :medium-y="50" :scale="3.2" :speed="0.8" />
        <Blob blend-mode="normal-oklch" :center="{ x: 0.37, y: 0.7 }" color-a="#ec4899" color-b="#14b8a6" color-space="oklab" :deformation="0.6" highlight-color="#06b6d4" :highlight-intensity="0.8" :highlight-y="-0.25" :seed="42" :size="1" :softness="0.45" :speed="1.2" />
        <WaveDistortion :angle="134" edges="mirror" :frequency="4" :speed="2.7" :strength="0.25" />
      </ProgressiveBlur>
    </FilmGrain>
  </Shader>
</template>