Contour Flow Shader

Customize:

• Three gradient colors and a line color

• Interaction mode: Ambient, Cursor, or Scroll

• Cursor push strength

• Animate toggle and speed

• Scale and warp of the terrain

• Line count, width and opacity

• Grain, render quality and corner radius

• Reduced-motion option

Use it for:

• Hero backgrounds on landing pages

• Animated card and banner fills

• Scroll-reactive section backdrops

Additional details

• Interaction modes — Ambient, Cursor, or Scroll reactive

• Colors — Three gradient stops plus line color

• Performance — Pauses off-screen, adjustable quality

• Accessibility — Optional reduced-motion freeze

• Editor safe — CSS gradient fallback in canvas and static export