Back to articles
Mantine Border Animate - A Complete Beam Rewrite with Dual Rendering Modes

Mantine Border Animate - A Complete Beam Rewrite with Dual Rendering Modes

via Dev.to ReactGiovambattista Fazioli

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

Read Full Article
2 views

Related Articles