import { InstallScript } from './components/InstallScript/InstallScript'; import * as demos from './demos';

Upgrading from an older major version? See the Upgrade guide for breaking changes and step-by-step migration instructions.

After installation import package styles at the root of your application:

import '@gfazioli/mantine-border-animate/styles.css';

You can import styles within a layer @layer mantine-border-animate by importing @gfazioli/mantine-border-animate/styles.layer.css file.

import '@gfazioli/mantine-border-animate/styles.layer.css';

The BorderAnimate component wraps any element to add stunning animated border effects. It's perfect for creating eye-catching UI elements like cards, buttons, input fields, alerts, and more.

• Multiple animation variants - Choose from beam, glow, or pulse effects
• Two beam modes - path (uniform size along the border) or conic (rotating gradient wedge)
• Fully customizable - Control colors, duration, size, blur, and more
• Works with any element - Wrap buttons, cards, inputs, or any Mantine component
• Performance optimized - Uses CSS animations for smooth 60fps effects
• Controllable - Toggle animation on/off, show/hide the border, set static angles
• Custom color stops - Multi-color gradients with colorStops for both beam modes
• Pause on hover - Pause animations when hovering with pauseOnHover
• Accessible - Respects prefers-reduced-motion automatically

Simply wrap your content with BorderAnimate and customize it using props:

You can control the border animation using the show prop.

You can also control the border animation using the animate prop. If animate is set to true, the border will animate continuously. If animate is set to false, the border will be static. You can control the angle of the border animation using the angle prop.

The BorderAnimate component supports three animation variants, each creating a unique visual effect. Use the variant prop to switch between them.

The beam variant (default) creates an animated glow that moves around the border. It supports two rendering modes via the beamMode prop:

• path (default) — a radial-gradient circle that travels along the border perimeter via CSS offset-path. The beam has uniform size at all positions and constant speed along the perimeter.
• conic — a rotating conic-gradient wedge. The rotation is smooth and continuous, but the beam width varies slightly on rectangular containers (wider at corners, narrower at edges) due to the conic geometry.

Key props for beam variant:

• beamMode - Rendering mode: 'path' (default) or 'conic'
• size - For path: pixel size of the traveling circle (xs..xl). For conic: angular spread of the wedge (xs=18°..xl=180° or number 0-50)
• duration - Controls how fast the beam moves/rotates
• colorFrom / colorTo - Colors of the beam
• colorStops - Full control over the gradient (overrides colorFrom/colorTo). For path mode creates a radial-gradient with concentric color rings, for conic mode creates a custom conic-gradient

The glow variant produces a pulsating glow effect that fades in and out. The entire border area illuminates with a soft, diffused light that pulses rhythmically. This is perfect for attention-grabbing elements or notification indicators.

Key props for glow variant:

• duration - Controls the pulse speed
• blur - Adjusts the softness of the glow
• borderOpacity - Controls the maximum opacity of the glow

The pulse variant creates a subtle scaling animation combined with opacity changes. The border gently expands and fades, creating a breathing effect. This variant is excellent for subtle emphasis without being too distracting.

Key props for pulse variant:

• duration - Controls the pulse rhythm
• blur - Softens the border effect

The colorStops prop gives you full control over the beam gradient. Each stop has a color (any Mantine color) and a position (0-100%). When provided, it overrides colorFrom/colorTo.

For path mode, colorStops creates a radial-gradient with concentric color rings in the traveling circle. For conic mode, it creates a custom conic-gradient — use transparent stops for beam/wedge effects, or fill the entire circle for a rotating gradient border.

Set pauseOnHover to pause the animation when the user hovers over the component. This is useful for interactive elements where the animation might be distracting during interaction.

The timingFunction prop controls the CSS animation timing function. By default, beam uses linear (constant speed), while glow and pulse use ease-in-out (smooth acceleration). You can override this with any valid CSS timing function.

The withMask and zIndex props allow you to create advanced visual effects, including background glows and layered animations.

By default, withMask is true, which clips the animated effect to the border area only. Set withMask={false} to let the glow extend beyond the border, creating a softer, more diffused effect. Both beam modes (path and conic) support masking.

The zIndex prop controls the stacking order of the border effect. By default, the border appears in front of the content (zIndex={1}). Set zIndex={-1} combined with withMask={false} to create beautiful background glow effects that appear behind your content.

BorderAnimate can be used with virtually any Mantine component. Here are some common use cases to inspire your implementations.

Add animated borders to buttons to make them stand out. Perfect for call-to-action buttons, submit buttons, or any interactive element that needs extra attention.

Highlight input fields with animated borders to guide users through forms or indicate active/focused states.

Make alerts more noticeable with animated borders. Use different variants and colors to convey urgency levels.

Create premium-looking cards with animated borders. Great for featured content, pricing cards, or special offers.

Even small elements like chips can benefit from animated borders to indicate selection or special status.

Wrap accordion components with animated borders to create visually engaging expandable sections. The border effect adds a modern touch to FAQ sections or collapsible content areas.

Nest multiple BorderAnimate components to create complex, layered effects. Combine different variants, speeds, directions, and colors to achieve unique visual compositions. This technique is perfect for hero sections or premium UI elements that need extra visual impact.

BorderAnimate works perfectly with circular shapes. Set radius="100%" to create animated borders around avatars, profile pictures, or any circular UI element. The beam smoothly follows the circular path.

BorderAnimate automatically respects the prefers-reduced-motion media query. When a user has enabled "Reduce motion" in their operating system settings, all animations are disabled. No additional configuration is needed.