ColorBends
A dynamic shader background with animated color bends. Supports rainbow mode or a fully customizable solid color. Mouse-reactive, smooth, and fully adjustable.
Make it with Workshop
Build your own component with AI
About this Component
ColorBends is a high-performance WebGL background built with a custom Three.js shader.
Perfect for hero sections, landing pages, and modern interactive UI.
✨ Features
Animated rainbow color-bending shader
Solid color mode for minimal, clean aesthetics
Smooth auto-rotation & mouse-reactive parallax
Adjustable warp, frequency, noise & speed
Transparent canvas (works with any background)
Optimized for performance (no antialias, controlled pixel ratio)
🎨 Modes
Rainbow Mode
Creates flowing multicolor bands with dynamic hue mapping.
Solid Mode
Uses a single color that bends and warps with the underlying shape.
🖱 Interaction
Pointer movement subtly warps the curves based on your settings:
Mouse Influence
Parallax
Warp Strength
⚙️ Perfect for:
Hero headers
Background animations
Portfolios
Tech / SaaS landing pages
Creative visuals anywhere in your layout
