Skip to content
Index730 resources
Border Beam

Border Beam

React component that draws an animated traveling or breathing glow around any element

Tier A · StrongAnimation LibraryComponent Librarybeam.jakubantalik.com

(Visit beam.jakubantalik.com ↗)(Docs)(Repository)
Preview image from beam.jakubantalik.com

Border Beam is a single zero-dependency React component, published to npm as border-beam (v1.3.0, MIT). You wrap any element in <BorderBeam> and it overlays an animated glow, auto-detecting the child's border-radius. Five size presets split into two families: rotate (sm, md, line) drives a conic-gradient beam masked to the border via CSS @property keyframes, and pulse (pulse-inner, pulse-outside) breathes from a single shared frame-rate-capped requestAnimationFrame loop that writes plain CSS custom properties. Four color variants (colorful, mono, ocean, sunset), three themes (dark, light, auto), plus strength, duration, brightness, saturation, hueRange, staticColors, borderRadius, active and onActivate/onDeactivate callbacks. This site is the live demo; it is a Vite SPA whose served HTML is an empty shell.

Install
npm install border-beam

For an agent

Reach for this instead of hand-rolling a Magic-UI-style border beam: it is a real npm package with zero dependencies and react>=18 as its only peer, so it composes with shadcn/ui and Tailwind without adding framer-motion. Two traps are documented and both bite: pulse-outside renders behind the child at z-index -1 and needs an opaque child plus overflow room in the parent, and it borrows the child's own 1px border as the idle hairline, so give the child a border or an inset box-shadow. Also gate the rotate presets yourself — only the pulse presets ship a prefers-reduced-motion block — and expect stepped rather than smooth motion on browsers without CSS @property (pre-Chrome 85, pre-Safari 15.4, pre-Firefox 128).

Why it is here. The glowing-border effect is everywhere in AI product UI and is usually copy-pasted badly; this packages it properly, with reduced-motion handling, a shared rAF loop and honest degradation notes.

Install command, framework, licence and component list.

Facts

License
MIT
Pricing
Free, Open source
Framework
React
Styling
Vanilla CSS, CSS custom properties
Distribution
npm package, GitHub repository
Platform
Web
Content type
Code
Agent readiness
CLI installable, Readable open source, Client-rendered shell
Accessibility
Honors reduced motion, Known accessibility gaps
Maturity
Actively maintained
GitHub stars
1,991
Package
border-beam

Components it ships

1 total
Animation

Helps you build

2
HomepageAI Chat Panel

Notable for

  • 5 presets across rotate and pulse families
  • 4 color variants
  • zero dependencies, react>=18 peer only
  • shared 30fps rAF pulse driver
  • auto-detects child border-radius

Provenance

Verified 2026-08-15. HTTP 200. https://beam.jakubantalik.com (200, 3.4KB Vite shell + meta tags, /assets/main-CHM1__fq.js inspected), raw packages/border-beam/README.md, registry.npmjs.org/border-beam

Also in Motion & Interaction

6
beam.jakubantalik.comTier A