Rainbow Brush
A component that renders rainbow-colored strokes following mouse movement
Make it with Workshop
Build your own component with AI
About
A mouse component that renders rainbow-colored strokes following mouse movement. Supports two interaction modes: hover (automatic drawing as the mouse moves) or click-and-drag (drawing only while pressing). Features adjustable line thickness, color transition speed, and optional fade-out effects.
This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library
Instructions
Copy and paste the RainbowBrush component into your project file
Ensure that the component is sized properly
Customize the behaviour via property controls
Adjust the line width and background color to match your design
Choose between hover or press interaction in the properties panel
Set the rainbow gradient speed for color transitions
Toggle the disappear effect and adjust its delay if desired
Fine-tune the elasticity for more dynamic strokes
Preview
How It Works
The component uses several key properties:
Basic settings (line width, background color)
Interactive controls (hover/press, rainbow speed)
Dynamic effects (disappearing lines, elasticity)
Time controls (fade delay, animation speed)
Support
For any queries and help setting up the component, contact hello@segmentui.com
