Neon Border

Neon Border is a UI effect in the UI HUB UI effects collection. Two mirrored conic-gradient arc groups (A at lap 0, B at lap 0.5) are masked to the border region via content-box/border-box xor mask, then animated along the element perimeter.

The component is driven by 8 documented props (color, rounded, thickness, borderSize, glow, movement and 2 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: React; CSS mask (content-box/border-box xor); conic-gradient animation.

Preview the UI effect in the browser above, copy the source, and paste it into your project. UI Effects components in UI HUB are grouped by category so you can compare effects side by side before choosing one.