border-beam-react

Skill by ara.so — Daily 2026 Skills collection.

border-beam is a lightweight React component that renders an animated traveling glow/beam effect around any element — cards, buttons, inputs, search bars, or any container. It uses CSS @property for GPU-accelerated animations with no runtime animation libraries required.

Installation

npm install border-beam

Requirements:

• React 18+
• Modern browser: Chrome 85+, Safari 15.4+, Firefox 128+

Basic Usage