animated-border-beam-vue3

animated-border-beam-vue3

This project is a Vue 3 port of the original React library Jakubantalik/border-beam.

Animated border beam effect for Vue 3. A lightweight component that adds a traveling glow animation around any element -- cards, buttons, inputs, or search bars.

Install

npm install animated-border-beam-vue3

Quick start

<template>
  <BorderBeam>
    <div class="card">
      Your content here
    </div>
  </BorderBeam>
</template>

<script setup lang="ts">
import { BorderBeam } from 'animated-border-beam-vue3';
</script>

<style>
.card {
  padding: 32px;
  border-radius: 16px;
  background: #1d1d1d;
}
</style>

The component wraps your content and overlays the animated beam effect. It auto-detects the border-radius of the first child element.

Sizes

Three built-in size presets control the glow intensity and animation style:

<!-- Full border glow (default) -->
<BorderBeam size="md">
  <Card />
</BorderBeam>

<!-- Compact glow for small elements -->
<BorderBeam size="sm">
  <IconButton />
</BorderBeam>

<!-- Bottom-only traveling glow -->
<BorderBeam size="line">
  <SearchBar />
</BorderBeam>

Color variants

Four color palettes are available:

<BorderBeam color-variant="colorful" />
<BorderBeam color-variant="mono" />
<BorderBeam color-variant="ocean" />
<BorderBeam color-variant="sunset" />

All variants except mono animate through a hue-shift cycle.

Theme

Adapts beam colors for dark or light backgrounds:

<BorderBeam theme="dark" />
<BorderBeam theme="light" />
<BorderBeam theme="auto" />

Strength

Control the overall intensity of the effect without affecting the wrapped content:

<BorderBeam :strength="0.7">
  <Card />
</BorderBeam>

strength accepts a value from 0 (invisible) to 1 (full intensity, default).

Play / pause

Toggle the animation on and off with smooth fade transitions:

<template>
  <BorderBeam :active="active" @deactivate="() => console.log('faded out')">
    <Card />
  </BorderBeam>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const active = ref(true);
</script>

Props

All standard attributes passed to the component are forwarded to the wrapper.

How it works

BorderBeam renders a wrapper <div> with:

• ::after — the beam stroke (conic gradient masked to the border)
• ::before — inner glow layer
• [data-beam-bloom] — outer bloom/glow child div

All effect layers are absolutely positioned and use pointer-events: none, so they never interfere with your content. Animations use CSS @property for smooth GPU-accelerated transitions.

Project structure

animated-border-beam-vue3/
├── src/
│   ├── index.ts          # Public exports
│   ├── BorderBeam.vue     # Vue component
│   ├── types.ts           # TypeScript type definitions
│   └── styles.ts          # CSS generation engine
├── demo/                  # Vite + Vue demo site
├── dist/                  # Built output (ESM + CJS + types)
├── package.json
├── LICENSE
└── README.md

Requirements

• Vue 3+
• Modern browser with CSS @property support (Chrome 85+, Safari 15.4+, Firefox 128+)

Accessibility

The effect layers are purely decorative and use pointer-events: none. They do not affect keyboard navigation or screen readers. The component respects prefers-reduced-motion when implemented by the consumer.

License

MIT