Border Beam

Animated glow that wraps any element. A beam travels around the border (rotate family) or the glow breathes in place (pulse family). Vue port of border-beam by Jakub Antalik, MIT licensed.

Default

Wrap any element. The beam sizes itself to the wrapper and picks up the border radius of the first child, so a rounded card needs no extra configuration.

Build anything...

Rotate family

A beam travels around the element. md is the full border glow, sm is tuned for compact controls, and line lights only the bottom edge, which suits inputs and search bars.

Build anything...

AgentAuto

Pulse family

The glow breathes instead of travelling. pulse-inner stays contained inside the border, pulse-outside blooms past the element as a halo, so give it room to spill and an opaque child to bloom behind.

Working...

Generate color palettes
Recommend font pairings
Create layout templates
Build section engine

Build anything...

Color variants

Four palettes. All of them drift through a hue cycle except mono, which pins its colors.

colorful

mono

ocean

sunset

Strength

strength scales the whole effect between 0 and 1. It touches only the beam, glow and bloom layers, never the wrapped content.

strength 1

strength 0.7

strength 0.35

Theme

The palette adapts to the substrate it sits on. auto follows the nearest data-theme attribute or dark/light class and updates live when the page theme flips. Pin it with light or dark when the element sits on a fixed surface.

theme="light"

theme="dark"

theme="auto"

Play and pause

Toggling active fades the effect in and out rather than cutting it. The activate and deactivate events fire once each fade finishes.

Playground

Every knob on one panel. Type and color use Toggle Group, strength uses Slider Ruler, and the button drives the fade.

Type

Color

Strength

Strength0.7

Build anything...

API Reference

BorderBeam

Prop	Type	Default	Description
`size`	`"md" \| "sm" \| "line" \| "pulse-inner" \| "pulse-outside"`	`"md"`	Type preset. The first three travel a beam around the border; the pulse pair breathes in place.
`colorVariant`	`"colorful" \| "mono" \| "ocean" \| "sunset"`	`"colorful"`	Color palette. mono implies staticColors.
`theme`	`"auto" \| "dark" \| "light"`	`"auto"`	Substrate adaptation. auto resolves from an ancestor data-theme or dark/light class, then from prefers-color-scheme.
`strength`	`number`	`1`	Overall intensity from 0 to 1. Affects only the beam layers.
`duration`	`number`	`1.96 / 3.1 / 2.3`	Cycle duration in seconds. The default depends on the type: rotate, line, then pulse.
`active`	`boolean`	`true`	Whether the animation is playing. Changes fade.
`borderRadius`	`number`	`auto detected`	Radius in px. Detected from the first child when omitted, falling back to the preset.
`brightness`	`number`	`1.3`	Glow brightness multiplier.
`saturation`	`number`	`per preset`	Glow saturation multiplier.
`hueRange`	`number`	`30`	Hue rotation range in degrees. Clamped to 13 for the line type.
`staticColors`	`boolean`	`false`	Disable the hue-shift animation.
`class`	`string`	—	Merged onto the wrapper element.

Event	Description
`activate`	Emitted once the fade-in finishes.
`deactivate`	Emitted once the fade-out finishes.

Slot	Description
`default`	The wrapped content. The first child element supplies the detected border radius.

Accessibility

Keyboard shortcuts and ARIA behavior.

Every effect layer is decorative and set to pointer-events: none, so the beam never blocks clicks, focus or screen readers.
The pulse types ship a prefers-reduced-motion: reduce block that stops their breathing, and the shared driver skips registering an instance when that preference is set.
Each instance pauses its painting when scrolled offscreen (IntersectionObserver with a 256px margin) and resumes on the way back in, without firing activate or deactivate.
The pulse breathing runs on one shared requestAnimationFrame loop capped near 30fps rather than a per-instance loop, so many beams on a page stay cheap.

Blur Image Bottom Nav