ColorBends
color-bendsGenerates pointer-reactive organic color bands from a folded noise field.
Usage
Basic usage
The default ribbon flow field, the color is chart token, adaptive light and dark theme.
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<ColorBends />
</div>Custom color matching + high frequency
colors transfers the warm color array, and increases frequency to make the ribbon thinner.
<ColorBends
colors={[
"oklch(0.72 0.22 30)",
"oklch(0.78 0.18 60)",
"oklch(0.68 0.2 350)",
]}
frequency={2}
scale={0.8}
speed={0.3}
/>Automatic rotation (wallpaper level)
autoRotate lets the flow field continue to rotate, and intensity brightens as the content background.
Hulian component library
Multi-color flow field · WebGL · Theme perception
<ColorBends autoRotate={8} intensity={2.2} bandWidth={8} speed={0.15} />Solid color single layer
iterations=1 without folding, noise=0 with grain removal to get a clean and stretched ribbon.
<ColorBends iterations={1} noise={0} warpStrength={0.6} />When to Use
Use it for a backdrop of colorful organic ribbons that bend through one another, such as a creative landing page, AI-product hero, or brand field. Use Beams for a single-color light curtain, Balatro for a painted vortex, or DotPattern for a regular grid. ColorBends offers the richest color mixing, pointer attraction, and tuning surface of these options.
Import
import { ColorBends } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] | Five chart tokens | Ribbon colors; accepts any CSS colors, uses at most the first eight, and defaults to theme-aware tokens |
| rotation | number | 90 | Static rotation in degrees that sets the overall flow direction |
| autoRotate | number | 0 | Automatic rotation speed in degrees per second; 0 disables continuous rotation |
| speed | number | 0.2 | Flow speed coefficient; 0 = freeze as static texture |
| scale | number | 1 | Flow-field scale; lower values produce denser bands, while higher values stretch them |
| frequency | number | 1 | Ripple frequency; higher values create denser sinusoidal variation |
| warpStrength | number | 1 | Amount of ribbon deformation applied by the flow field |
| iterations | number | 1 | Noise-folding passes from 1 to 5; higher values create more complex structures |
| intensity | number | 1.5 | Overall brightness multiplier |
| bandWidth | number | 6 | Soft-threshold band parameter; higher values make ribbons narrower and sharper |
| noise | number | 0.15 | Grain intensity; 0 produces a clean image |
| parallax | number | 0.5 | Pointer-parallax strength used to create depth |
| mouseInfluence | number | 1 | Pointer pulling strength; 0=no response to pointer |
| transparent | boolean | true | Render only the ribbons over a transparent background; false adds a black background |
| className | string | — | Class name forwarded to the root, which includes absolute inset-0 z-0 |
Slots
| Slot | Type | Description |
|---|---|---|
| fallback | ReactNode | Static gradient content used for reduced motion, SSR, or unavailable WebGL |
Usage Guidelines
- WebGL client rendering: the effect depends on OGL and WebGL. SSR renders
fallback; do not mount realtime logic directly in a server component. - Token colors require the `--color-` prefix: pass entries such as
var(--color-chart-1). Bare names such asvar(--chart-1)do not resolve. See [[hulian-token-color-var-needs-color-prefix]]. - Only the first eight
colorsare used; additional entries are ignored. - The parent container must be
relative+overflow-hidden.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-56 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<ColorBends
speed={0.2}
scale={1}
frequency={1}
intensity={1.5}
bandWidth={6}
autoRotate={0}
transparent={true}
/>
</div>