
Mantine Border Animate - A Complete Beam Rewrite with Dual Rendering Modes
The beam variant has been completely rebuilt with two rendering engines, multi-color gradient support, and a streamlined API. Introduction Version 1.0.0 of @gfazioli/mantine-border-animate is a major release that reimagines how animated borders work. The beam effect — the heart of the component — now ships with two distinct rendering modes, letting you choose between pixel-perfect border tracing and smooth conic rotation. Combined with new multi-color gradients, hover pause, custom easing, and built-in accessibility, this release makes animated borders more flexible, more beautiful, and easier to use than ever. What's New Two Beam Rendering Modes The biggest addition in v1.0 is the beamMode prop, which lets you choose how the beam effect is rendered: Path mode ( beamMode="path" , the new default) uses CSS offset-path to move a radial-gradient circle along the component's border. The beam maintains a uniform size at every position and travels at constant speed along the perimeter. This
Continue reading on Dev.to React
Opens in a new tab




