Warp · Kelp — Community Shader

Warp · Kelp

Animated WebGL shader background in the Warp style. Kelp variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#F43F5E, #7E22CE, #16051B, #FDE68A). Features: high intensity. A drop-in, zero-dependency React component for hero sections and animated gradient/noise backgrounds.

Pby paper-design

ShaderShader BackgroundWebGLWarpPaperAnimatedBackgroundHeroHero BackgroundAnimationAnimated BackgroundLiquidWaveKelp

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