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).
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).
