Waves builds a soft cloud-like WebGL field with warping, colour blending and fine grain. Use it for a diffuse background when hard stripes or sharp dots would be distracting. Wave intensity, warp and detail shape the field; contrast, brightness and saturation set its tonal range. Rotation and offsets reposition the composition. Seed gives another arrangement, while drift and speed control how it evolves. Softness and vignette help calm the edges around foreground content.
How this shader works
Waves builds a soft, cloud-like field with warping, colour blending and fine grain. Use it as a diffuse background where hard stripes or sharp dots would distract. Wave intensity, Warp and Detail shape the field, and Contrast, Brightness and Saturation set its tonal range. Rotation and the offsets reposition the composition, and Variation gives another arrangement.
Tips
- Softness and Vignette calm the edges around foreground content.
- Variation picks a different arrangement of the cloud. Try a few values.
- Drift and Speed / direction control how it changes over time. This preset runs in reverse.
- Lower Grain for a smoother surface.
Questions
How do I make a soft animated cloud background?
Open Waves, set Wave intensity and Softness, and keep Speed / direction low. Export it as an HTML file, a React or Svelte component or an MP4 video.
How is it different from Flowing Waves?
Waves is a soft, diffuse cloud. Flowing Waves has stronger metallic highlights and a Center dimming control.
Preview and customize in the browser. Exports require membership.