Liquid Wave Divider

Animated wave that react to scroll

Animated Liquid Divider replaces hard edges between sections with a living, layered wave — rendered on canvas, animated in real time, and reactive to scroll: scrolling agitates the surface like real liquid, with ripples that travel in the direction you scroll. Features Up to 5 depth layers with organic, non-repeating motion Scroll agitation: waves churn and ripple as the user scrolls 4 directions (up, down, left, right) — works as a horizontal or vertical divider Full transparency support: fade either color to 0 and the liquid effect stays intact Waves never clip outside the component bounds, at any amplitude 10 property controls, zero code required Performance Lightweight 2D canvas (no WebGL, no libraries). Pauses automatically when off-screen, renders a static frame in the editor, and respects prefers-reduced-motion. How to use Drag onto your canvas and set Position to Absolute Pin it to the section edges: set Left and Right to 0 so the divider stretches edge to edge (setting Width to 100% or Fill also works) Set Height to your transition size (e.g. 160px) and place it overlapping the edge between two sections. Tip: use the top/bottom pin toggle to anchor the divider to the right edge — this is the most reliable method, especially when using transparency. Any placement that sits the component over the section boundary will work. Match Color 1 and Color 2 to your section backgrounds — or use transparency Built with procedural canvas animation and real-time scroll physics — motion that goes beyond what preset effects can do.

Animated wave that react to scroll