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.
What is Neon Border?
A moving neon border arc: a short glowing dash built from a per-frame conic gradient skims around the rim of any element with a fading tail and soft layered glow, gliding continuously or stepping corner to corner.
Neon Border at a glance
- Category
- UI Effects
- Pricing
- Free to use
- Libraries
- React
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 8
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Neon Border works
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. Each frame builds a conic gradient from samples of the arc: withAlpha converts the color to rgba so stops can fade the tail, and the perimeter helper maps a 0-1 lap position to an angle on the box border so the arc wraps corners. The layout runs in a single rAF loop, reading live props via a ref (speed/movement/borderSize/color), and only writes the --arc custom property when speed > 0. Glow is three blurred plus-lighter layers at increasing blur/reach when glow > 0. A ResizeObserver tracks the host box so the arc geometry matches the real border; the root is 100%x100% flexShrink-0 and rounded to the requested radius.
Technical information for Neon Border
| Category | UI Effects |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | blend modes, CSS gradients, ResizeObserver, requestAnimationFrame |
| State change | a short bright neon arc sitting on one edge of the border to the arc glides around all four corners, leaving a fading tail where it has been |
| Props | 8 configurable |
| Usage example | Not published yet |
What Neon Border requires
- React
- CSS mask (content-box/border-box xor)
- conic-gradient animation
- ResizeObserver
- requestAnimationFrame loop
- mix-blend-mode plus-lighter
Neon Border questions
What is Neon Border?
A moving neon border arc: a short glowing dash built from a per-frame conic gradient skims around the rim of any element with a fading tail and soft layered glow, gliding continuously or stepping corner to corner.
How does Neon Border work?
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. Each frame builds a conic gradient from samples of the arc: withAlpha converts the color to rgba so stops can fade the tail, and the perimeter helper maps a 0-1 lap position to an angle on the box border so the arc wraps corners. The layout runs in a single rAF loop, reading live props via a ref (speed/movement/borderSize/color), and only writes the --arc custom property when speed > 0. Glow is three blurred plus-lighter layers at increasing blur/reach when glow > 0. A ResizeObserver tracks the host box so the arc geometry matches the real border; the root is 100%x100% flexShrink-0 and rounded to the requested radius.
Which category does Neon Border belong to?
Neon Border is listed under UI Effects in the UI HUB catalog. Micro-interactions and hover effects that make an interface feel considered rather than static: beam and spotlight reveals, card cascades, marquees, option wheels and kinetic grids. Most are powered by Framer Motion and accept children plus timing props, so the same effect can wrap any layout. Ideal for feature grids, pricing tables and link lists.
What does the color prop do in Neon Border?
Border arc color (hex, rgb(), rgba(), or named; converted to rgba for the gradient stops). It defaults to "#CC9149".
What does the rounded prop do in Neon Border?
Border corner radius in % of the smaller side (0-100). It defaults to 24.
Is Neon Border free to use?
Neon Border is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Neon Border use?
Neon Border uses React and is styled with Tailwind CSS.
What does Neon Border need to run?
Neon Border needs React, CSS mask (content-box/border-box xor), conic-gradient animation and ResizeObserver.