Calm Violet Silk Shader Hero Background

Hero sections that carry a headline and body copy on a dark page: SaaS and AI landing pages, product launches, sign-in and waitlist screens. Slow violet silk ribbons drift over a near-black base. Every palette color is dark enough for white text at WCAG AA (the brightest, #6D4AFF, is 5.1:1 against white), and a soft vignette darkens the corners to frame the title. No cursor reaction.

by DHxWhy

ShaderShader BackgroundWebGLSilkAnimatedBackgroundHeroHero 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 + ·····));
}