Agent skill · software engineering · aradotso
border-beam-react
Animated border beam/glow effect component for React applications
Why this skill is useful
Provides a specialized React component with unique animation capabilities that the AI wouldn't generate on its own.
What it needs
Requires border-beam installed locally. About 4k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
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 Requirements: React 18+ Modern browser: Chrome 85+, Safari 15.4+, Firefox 128+ Basic Usage 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 Color Variants All variants except mono animate through a hue-shift cycle by default. Theme (Dark / Light / Auto) Controlling Intensity Play / Pause with Callbacks Custom Duration and Hue Range Custom Border Radius If auto-detection doesn't work (e.g., the radius is set via a CSS class), override it: Forwarded HTML Attributes The wrapper <div> forwards all standard HTMLDivElement attributes: Common Patterns Hover-activated beam Search bar with line beam Light theme card Reduced motion accessibility The component itself does not automatically respond to prefers-reduced-motion. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/border-beam-react