Border Beam React

A lightweight React wrapper that adds an animated traveling glow effect around cards, buttons, or inputs using CSS @property for GPU acceleration. You get size presets (full border, compact, or bottom line for search bars), color variants (rainbow, mono, ocean, sunset), and theme detection for light/dark backgrounds. The component auto-detects border radius and keeps all effect layers as pointer-events none so they never block interaction. Best part is the hover-activated pattern with the active prop, which lets you fade the beam in and out on demand. Works well for hero cards or interactive elements that need visual polish without adding a heavy animation library.

skills.sh installs: 304
GitHub stars: 26
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add aradotso/trending-skills --skill border-beam-react --agent claude-code

Installs into .claude/skills of the current project.

Files

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

import { BorderBeam } from 'border-beam';

function App() {
  return (
    <BorderBeam>
      <div style={{ padding: 32, borderRadius: 16, background: '#1d1d1d' }}>
        Your content here
      </div>
    </BorderBeam>
  );
}

BorderBeam wraps your content and auto-detects the border-radius of the first child element. All effect layers use pointer-events: none so they never block interaction.

Size Presets

// Full border glow (default) — for cards, panels
<BorderBeam size="md">
  <Card />
</BorderBeam>

// Compact glow — for small elements like icon buttons
<BorderBeam size="sm">
  <IconButton />
</BorderBeam>

SKILL.md on GitHub