Color Blend Gradient

Interactive silky color gradient waves

Color Bend is an interactive shader background that generates smooth “color ribbons” in real time. It creates a living gradient field that subtly shifts, reacts to pointer movement, and adds depth through controlled warp and parallax — ideal for hero sections, banners, cards, and editorial covers. Exmples WebGL shader (Three.js) The component renders a single full-bleed plane with a custom fragment shader. Everything is procedural: no images, no videos, no exports — just parameters you tweak in Framer. Palette & transparency Colors (up to 8) — define the palette that blends into the bend layers. Transparent — outputs clean alpha for easy layering on top of any background. Great for stacking with typography or UI blocks. Composition & orientation Rotation — sets the base angle of the bends. Auto Rotate — adds continuous ambient rotation for a “always alive” feel, without changing layout. Pattern & distortion Scale — zooms the pattern in/out (bigger, softer bends vs. tighter structure). Frequency — changes the bend density and detail level. Warp — controls distortion strength, from clean minimal flow to more expressive motion. Interaction Parallax — shifts the pattern with the pointer to create depth. Mouse Influence — pulls the field toward the cursor for a more “reactive” surface. Pointer Smooth — softens pointer tracking to avoid jitter and keep motion premium. Texture & rendering Noise — adds refined film-style grain to reduce “digital banding” and make gradients feel more tactile. Max DPR — caps device pixel ratio for performance control on high-DPI screens. Editor behavior Render in Canvas — toggles rendering inside the Framer editor canvas (useful to keep the editor lightweight when you have multiple shader components on the page).

Interactive silky color gradient waves