DEV Community

Cover image for Mantine Border Animate - A Complete Beam Rewrite with Dual Rendering Modes
Giovambattista Fazioli
Giovambattista Fazioli

Posted on

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

#react #typescript #nextjs #ui

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 is the best choice for most UI elements.

<BorderAnimate beamMode="path" size="md" duration={5}>
  <Card>Your content</Card>
</BorderAnimate>
Enter fullscreen mode Exit fullscreen mode

Conic mode (beamMode="conic") uses a rotating conic-gradient wedge animated via CSS @property. The rotation is buttery smooth, and the size prop controls the angular spread of the wedge (from a tight 18-degree spotlight at xs to a full 180-degree sweep at xl). It works best on circular or near-square elements.

<BorderAnimate beamMode="conic" size="lg" duration={3}>
  <Avatar radius="100%" />
</BorderAnimate>
Enter fullscreen mode Exit fullscreen mode

Multi-Color Gradients with colorStops

Move beyond two-color gradients. The new colorStops prop gives you full control over the beam's colors:

<BorderAnimate
  colorStops={[
    { color: 'transparent', position: 0 },
    { color: 'green', position: 20 },
    { color: 'cyan', position: 40 },
    { color: 'yellow', position: 60 },
    { color: 'red', position: 80 },
    { color: 'transparent', position: 100 },
  ]}
>
  <Paper>Multi-color beam</Paper>
</BorderAnimate>
Enter fullscreen mode Exit fullscreen mode

colorStops works with both beam modes:

  • Path mode generates a radial-gradient with concentric color rings
  • Conic mode generates a custom conic-gradient — use transparent stops for beam/wedge effects, or fill the entire circle for a rotating rainbow border

Pause on Hover

Interactive elements often need the animation to pause during user interaction. The new pauseOnHover prop does exactly that — using pure CSS animation-play-state with zero JavaScript overhead:

<BorderAnimate pauseOnHover>
  <Button>Hover me to pause</Button>
</BorderAnimate>
Enter fullscreen mode Exit fullscreen mode

Custom Timing Functions

Fine-tune animation feel with timingFunction. By default, beam uses linear and glow/pulse use ease-in-out, but you can override with any CSS timing function:

<BorderAnimate timingFunction="ease-in-out" />
<BorderAnimate timingFunction="cubic-bezier(0.4, 0, 0.2, 1)" />
<BorderAnimate timingFunction="steps(8)" />  {/* retro pixel effect */}
Enter fullscreen mode Exit fullscreen mode

Accessibility Out of the Box

BorderAnimate now respects prefers-reduced-motion automatically. Users who have enabled "Reduce motion" in their OS settings will see no animations — no configuration needed, no extra props. It just works.

Breaking Changes

This is a major release with several breaking changes. Here's what you need to update:

gradient variant removed

The gradient variant is gone. Use beamMode="conic" with full colorStops instead:

// v0.x
<BorderAnimate variant="gradient" colorFrom="red" colorTo="blue" />

// v1.0
<BorderAnimate
  beamMode="conic"
  colorStops={[
    { color: 'red', position: 0 },
    { color: 'blue', position: 50 },
    { color: 'red', position: 100 },
  ]}
/>
Enter fullscreen mode Exit fullscreen mode

opacity renamed to borderOpacity

The old opacity prop conflicted with the CSS opacity property inherited from Mantine's BoxProps. It's now borderOpacity:

// v0.x
<BorderAnimate opacity={0.5} />

// v1.0
<BorderAnimate borderOpacity={0.5} />
Enter fullscreen mode Exit fullscreen mode

anchor and count props removed

Both props have been removed with no direct replacement. Simply remove them from your components.

size semantics changed

The size prop now behaves differently depending on beamMode:

  • Path mode: still pixel-based (xs=64px to xl=480px) — same as v0.x
  • Conic mode: angular spread of the wedge (xs=18 degrees to xl=180 degrees)

BorderAnimateVariant type updated

The type changed from 'beam' | 'glow' | 'gradient' | 'pulse' to 'beam' | 'glow' | 'pulse'. Update any type assertions or switch statements in your code.

Improvements

  • Glow z-index fix — the glow variant now correctly renders behind content, preventing the overlay from obscuring text
  • Accurate demos — all documentation demos now show code that exactly matches the rendered output
  • New exported types — BorderAnimateBeamMode, BorderAnimateColorStop, and BorderAnimateVariant are now properly exported for consumers

Getting Started

Install or update:

npm install @gfazioli/mantine-border-animate@1
Enter fullscreen mode Exit fullscreen mode

Import styles at the root of your application:

import '@gfazioli/mantine-border-animate/styles.css';
Enter fullscreen mode Exit fullscreen mode

Basic usage:

import { BorderAnimate } from '@gfazioli/mantine-border-animate';

function Demo() {
  return (
    <BorderAnimate>
      <Paper withBorder p="md" radius="md">
        Your content with an animated border
      </Paper>
    </BorderAnimate>
  );
}
Enter fullscreen mode Exit fullscreen mode

Links

Top comments (0)