Flow Current

FlowCurrent is a WebGL shader background that renders a soft, continuously flowing color field, like dye drifting through water. Flip one Trigger control and it changes behavior entirely: let it drift on its own, bend it toward your cursor, or tie it to scroll speed. It's built to work as a hero background, a section divider, a card background, or a low-opacity overlay on top of other content, not just a one-off hero visual.

Customize in Framer:

• 3 color stops for the gradient — any brand palette

• Pattern Scale, Speed, and Warp Strength to shape how the flow looks

• Trigger: Ambient Drift, Cursor Reactive, or Scroll Reactive

• Reactivity to control how strongly cursor/scroll movement pushes the flow

• Grain for subtle texture and banding reduction

• Opacity and Blend Mode (Normal, Screen, Multiply, Overlay, Soft Light) to layer it over other content

• Freeze toggle for a still frame instead of animating

Use it for:

• A hero section background that matches your brand colors out of the box

• A section divider or full-bleed atmosphere layer between static content blocks

• A faint Screen-blended overlay on top of a product shot or photo grid

Additional details

• Trigger modes — Ambient, Cursor, or Scroll reactive, switchable with one control

• Color controls — 3 gradient stops, works with any brand palette

• Blend mode — Normal, Screen, Multiply, Overlay, or Soft Light, so it can sit on top of other content

• Graceful fallback — static CSS gradient in the canvas editor, static exports, and browsers without WebGL

• Performance-aware — pauses its render loop when scrolled off-screen