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 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.
João Porto
