Go to AntUIKit homepage

Border Beam

A light that travels around an element's border to draw the eye, and hides itself for readers who prefer reduced motion.

Preview in FigmaLLMs

Accessibility

Border Beam is decoration and exposes nothing to assistive technology. What needs care is the motion.

It carries no semantics

The beam is a single div with aria-hidden="true" and pointer-events: none, placed inside the child. Screen readers skip it and clicks pass through to the element underneath.
  • The element reads the same as it would without the beam. Do not add a role or aria-label to announce it.
  • BorderBeam adds no element around the child, so the accessibility tree and the layout do not change.
  • Whatever the beam means belongs to the child: the word “Recommended”, the status text, aria-busy or a live region.

Reduced motion is handled for you

Under prefers-reduced-motion: reduce the beam is hidden, and a className override cannot bring its animation back. You need no motion-safe: guard, media query or prop.
  • The beam is also hidden in browsers without mask-composite or offset-path.
  • So the element has to be complete without it. Test the page with the system setting on. If anything becomes unclear, the beam was carrying meaning.

A moving light beside text

The beam runs forever, and the system setting is the only way to stop it. That makes where you place it the whole decision.
  • For a reader with a vestibular condition, repeating movement at the edge of the eye can cause dizziness or nausea.
  • For a reader with an attention or reading difficulty, movement next to a line of text pulls the eye away on every lap.
  • Do not wrap running text, a form, a table or a long card body. Wrap something short, and remove the beam when what it announces is done.
  • One beam per view. A reader cannot turn off one of two lights.

Never the only signal

The beam is a thin line, always moving, and absent for readers who asked for reduced motion. That makes it a poor carrier for information.
  • Whatever the beam says (this plan is recommended, this panel is working) has to be said in text too.
  • Check a custom color in light and dark mode. A hue that shows on one background can vanish on the other.
  • A thicker lineWidth does not make the signal clearer. It makes the distraction bigger.

Nothing here is focusable

The beam takes no tab stop, focus ring or pointer events. Keyboard order stays whatever the child already had.
  • BorderBeam takes no ref, and there is no handle to reach the beam with.
  • Do not add tabIndex or a handler to BorderBeam. Any interaction belongs to the child.
  • If the beam points at a control, the control still needs its own focus style. The beam cannot stand in for it.
BadgeBreadcrumb
© 2026 AntUIKit . All rights reserved.