Rainbow Brush

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

1. Copy and paste the RainbowBrush component into your project file

2. Ensure that the component is sized properly

3. 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

4. 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