Color Loops
Animated colorful loops with orbital motion
color-loops-tw
Customize
Tweak the props livePosition & Animation
0.5
0
0.25
Ripple
1
0.2
1
Color Channels
0.6
1.15
1.15
0.65
Props
| Name | Type | Default | Description |
|---|---|---|---|
centerX | number | 0.5 | Horizontal center position of ripples (0-1) |
centerY | number | 0.5 | Vertical center position of ripples (0-1) |
speed | number | 1.0 | Animation speed multiplier |
scale | number | 1.0 | Ripple density/scale (higher = tighter ripples) |
intensity | number | 0.5 | Ripple wave intensity (0-1) |
symmetric | boolean | false | Use symmetric circular ripples vs asymmetric elliptical |
redInfluence | number | 1.0 | Red channel base color influence (0-1) |
greenInfluence | number | 1.0 | Green channel base color influence (0-1) |
blueInfluence | number | 1.0 | Blue channel base color influence (0-1) |
baseColor | number | 0.0 | Base color offset - shifts all colors (0 = black base, 1 = white base) |
opacity | number | 1.0 | Overall opacity (0-1) |
className | string | "" | Additional CSS classes |
centerXnumberHorizontal center position of ripples (0-1)
Default:
0.5centerYnumberVertical center position of ripples (0-1)
Default:
0.5speednumberAnimation speed multiplier
Default:
1.0scalenumberRipple density/scale (higher = tighter ripples)
Default:
1.0intensitynumberRipple wave intensity (0-1)
Default:
0.5symmetricbooleanUse symmetric circular ripples vs asymmetric elliptical
Default:
falseredInfluencenumberRed channel base color influence (0-1)
Default:
1.0greenInfluencenumberGreen channel base color influence (0-1)
Default:
1.0blueInfluencenumberBlue channel base color influence (0-1)
Default:
1.0baseColornumberBase color offset - shifts all colors (0 = black base, 1 = white base)
Default:
0.0opacitynumberOverall opacity (0-1)
Default:
1.0classNamestringAdditional CSS classes
Default:
""