Aurora Flow Shader

About

AuroraFlowShader is a WebGL flow-field gradient background. Instead of a static gradient or a locked-in noise texture, it blends 2-4 of your own colors through a domain-warped noise field, so the result reads as an organic, slowly drifting aurora rather than a stock "shader background." It's built to sit behind hero sections, full-bleed banners, or individual cards.

The problem it solves: most shader/gradient marketplace components ship with one fixed palette and one fixed motion style, so using one means either accepting someone else's brand colors or editing code. AuroraFlowShader exposes its entire look — palette, motion, direction, grain, and how it reacts to the visitor — as Framer property controls, so it can be restyled per-project with no code changes, and it still looks intentional with zero configuration.

Customizations available in Framer

• Colors — array of 2 to 4 color stops the flow field blends between; accepts any Framer color format.

• Trigger — Ambient (continuous drift), Cursor Reactive (warps toward the pointer), or Scroll Reactive (intensifies as the component scrolls through view).

• Interaction Strength — how strongly the cursor or scroll position warps the field (only shown for Cursor/Scroll trigger modes).

• Speed — animation speed of the flow field.

• Scale — zoom level of the underlying noise pattern (lower = larger, softer blobs).

• Distortion — amount of domain warping, for a more liquid vs. more gradient-like look.

• Flow Angle — direction in degrees the gradient flows, also used for the static-fallback CSS gradient.

• Grain — strength of an animated film-grain overlay (0 disables it).

• Opacity — overall component opacity, for layering under content.

• Border Radius — corner rounding, for use as a card background rather than a full-bleed one.