Teal Mist Waves Shader Background

Dark hero and call-to-action sections that should feel alive without fighting the copy: product pages, pricing headers, feature intros and sign-up panels. A slow band of teal mist rolls across a near-black base (waves preset, speed 14), and a faint spotlight follows the cursor. Deep teal and mint palette (#06212B, #0F7C8C, #4FD1C5); keep headlines over the darker areas or add a subtle overlay for small body text.

by DHxWhy

ShaderShader BackgroundWebGLWavesAnimatedInteractiveBackgroundHeroHero BackgroundAnimationAnimated Background

Open in editor View component

precision highp float;
uniform vec2  u_resolution;
uniform float u_time;
uniform vec3  u_colors[4];

vec3 shade(vec2 uv, vec2 p, float t) {
  // ····· ··· ···· ·· ······· ····· ·· ·····
  float v = fbm(p * ····· + t * ····);
  return palette(0.5 + 0.5 * sin(v + ·····));
}