A soft glow cursor effect that adds atmospheric color around the pointer without hiding controls or page content.

Colorful Cursor Aura turns pointer movement into atmosphere: a soft aura follows the pointer.
Use it on creative homepages, portfolios, campaign pages, and brand experiments where the cursor can carry the visual language. Keep it off dashboards, checkout, forms, and utility-heavy product screens.
The thing to watch is restraint. Treat the cursor layer as throwaway: switch it off on touch, keep focus states visible, and let nothing about clicking depend on it. If the page falls apart once you remove the effect, the cursor was doing work it should not own.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
Use this as cursor-system implementation guidance. Verify the shipped component export, pointer-tracking model, coarse-pointer disablement, z-index behavior, focus safety, cleanup, and reduced-motion handling before relying on exact props, defaults, imports, or installation steps.
Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere.
Use one cursor layer, throttle movement with requestAnimationFrame, avoid full-screen filter effects, and disable Colorful Cursor Aura on coarse pointers.
Switch it off for coarse pointers and leave touch native; anything revealed by the cursor needs a visible or tap-accessible alternative.
| Prop | Type | Default | Description |
|---|---|---|---|
auraSize | number | 325 | Diameter of the cursor aura. |
color1 | string | #a78bfa | Outer aura ring color. |
color2 | string | #fb7185 | Middle aura ring color. |
color3 | string | #fde68a | Inner aura ring color. |
followSpeed | number | 0.12 | How quickly the aura follows the cursor. |
Use it when a creative homepage needs a soft aura following the pointer for atmosphere — not on utility flows.
Disable it on coarse pointers with CSS and JS pointer queries, then provide native touch behaviour.
Only when the same content is visible or accessible without pointer movement. Cursor-only reveals are not suitable for critical information.
Native click targets, visible focus, hover states, and modal stacking all have to keep working underneath it.
Disable trails, lag, ripples, and pointer-following motion, then return to the native cursor.
Need a custom effect? Tell us what to create.