About this Component
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
