beam-glow-states

Install the border-beam package and wrap your element with the BorderBeam component, choosing a size preset like md or pulse-inner. Toggle the active prop based on component state rather than unmounting, so the built-in fade-in and fade-out transitions run.

Use the pulse-inner preset with strength around 0.55 to 0.75 and duration of 2.3 to 3 seconds, bound to your pending flag. Always pair it with a visible status label and aria-busy, and keep the loading state visible for at least 400 to 600 milliseconds to avoid flashing.

Yes, but BorderBeam must render inside a client component because it uses React state, effects, observers, and animation frames. Add the "use client" directive at the top of the file that imports it. It requires React and React DOM 18 or newer.

Pulse presets stop animating automatically under prefers-reduced-motion, but rotate and line presets must be disabled by the consumer using a matchMedia hook. Provide static fallbacks such as border color changes and focus outlines so state remains visible without motion.

The beam follows the wrapper bounds, so the first child must align to the wrapper's edges. Set the wrapper to inline-block for compact controls or width 100% for cards, and pass borderRadius explicitly when corner radius detection is unreliable.

Avoid beams for operations finishing in roughly 150 milliseconds or less, and never run multiple simultaneous beams in one viewport since they flatten hierarchy and increase paint work. Do not rely on the beam as the only state cue; keep text, contrast, and semantic attributes.