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.
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.
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.
Rotation — sets the base angle of the bends.
Auto Rotate — adds continuous ambient rotation for a “always alive” feel, without changing layout.
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.
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.
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.
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).
Iaroslav Vinokurov
