Color Bends

Create flowing bands of color with layered motion, distortion, and depth. Color Bends produces an animated ribbon-like background that works well for hero sections, product launches, portfolios, music projects, and expressive landing pages.

Build your own palette, control the composition, and fine-tune how the bands move, bend, rotate, and respond to the cursor.

How to use

Drop the component into your layout and resize it to cover the desired area. Add your colors, choose whether the background should be transparent, and set the overall rotation.

Adjust the animation using speed, scale, frequency, warp, iterations, intensity, and band width. You can also enable automatic rotation, hue cycling, mouse interaction, parallax, noise, and edge fading.

Features

• Animated ribbon-style color bands

• Add and manage custom colors

• Optional transparent background

• Manual and automatic rotation controls

• Adjustable animation speed

• Scale, frequency, and warp controls

• Multiple ribbon iterations for denser compositions

• Adjustable intensity and band width

• Optional animated hue cycling

• Edge fade control

• Mouse-responsive movement

• Adjustable parallax depth

• Optional noise texture

• Works as a section, frame, or full-page background

• Responsive across desktop, tablet, and mobile

• No setup or coding required