From aradotso-trending-skills-37
Renders animated traveling glow/beam border effects around React elements like cards, buttons, inputs, and search bars using GPU-accelerated CSS @property animations.
npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-1 --plugin aradotso-trending-skills-37This skill uses the workspace's default tool permissions.
> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.
Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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.
npm install border-beam
Requirements:
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.
// 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>
// Bottom-only traveling glow — ideal for search bars, inputs
<BorderBeam size="line">
<SearchBar />
</BorderBeam>
<BorderBeam colorVariant="colorful" /> {/* Rainbow spectrum (default), animates hue */}
<BorderBeam colorVariant="mono" /> {/* Grayscale, no hue animation */}
<BorderBeam colorVariant="ocean" /> {/* Blue-purple tones */}
<BorderBeam colorVariant="sunset" /> {/* Orange-yellow-red tones */}
All variants except mono animate through a hue-shift cycle by default.
<BorderBeam theme="dark" /> {/* Default — for dark backgrounds */}
<BorderBeam theme="light" /> {/* For light backgrounds */}
<BorderBeam theme="auto" /> {/* Detects system prefers-color-scheme */}
// strength: 0 (invisible) to 1 (full, default) — only affects beam layers
<BorderBeam strength={0.6}>
<Card />
</BorderBeam>
// brightness and saturation multipliers
<BorderBeam brightness={1.5} saturation={1.4}>
<Card />
</BorderBeam>
import { useState } from 'react';
import { BorderBeam } from 'border-beam';
function AnimatedCard() {
const [active, setActive] = useState(true);
return (
<>
<BorderBeam
active={active}
onActivate={() => console.log('Beam faded in')}
onDeactivate={() => console.log('Beam faded out')}
>
<div style={{ padding: 32, borderRadius: 16, background: '#111' }}>
Hover-activated beam
</div>
</BorderBeam>
<button onClick={() => setActive(a => !a)}>Toggle Beam</button>
</>
);
}
<BorderBeam
duration={3.5} // Animation cycle in seconds (default: 1.96 for md, 2.4 for line)
hueRange={60} // Hue rotation range in degrees (default: 30)
staticColors={true} // Disable hue-shift entirely
>
<Card />
</BorderBeam>
If auto-detection doesn't work (e.g., the radius is set via a CSS class), override it:
<BorderBeam borderRadius={24}>
<div className="my-card">Content</div>
</BorderBeam>
The wrapper <div> forwards all standard HTMLDivElement attributes:
<BorderBeam
className="my-wrapper"
style={{ display: 'inline-block' }}
data-testid="beam-card"
>
<Card />
</BorderBeam>
import { useState } from 'react';
import { BorderBeam } from 'border-beam';
function HoverCard() {
const [hovered, setHovered] = useState(false);
return (
<BorderBeam active={hovered} strength={0.85} colorVariant="ocean">
<div
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
style={{ padding: 24, borderRadius: 12, background: '#0f0f0f' }}
>
Hover me
</div>
</BorderBeam>
);
}
import { BorderBeam } from 'border-beam';
function SearchInput() {
return (
<BorderBeam size="line" colorVariant="sunset" theme="dark">
<input
type="text"
placeholder="Search..."
style={{
padding: '12px 16px',
borderRadius: 8,
background: '#1a1a1a',
border: '1px solid #333',
color: '#fff',
width: 320,
}}
/>
</BorderBeam>
);
}
import { BorderBeam } from 'border-beam';
function LightCard() {
return (
<BorderBeam theme="light" colorVariant="colorful" strength={0.8}>
<div style={{ padding: 32, borderRadius: 16, background: '#f5f5f5' }}>
Light mode card
</div>
</BorderBeam>
);
}
The component itself does not automatically respond to prefers-reduced-motion. Handle it in the consumer:
import { useReducedMotion } from 'framer-motion'; // or your own hook
import { BorderBeam } from 'border-beam';
function AccessibleCard() {
const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
return (
<BorderBeam active={!reduceMotion}>
<Card />
</BorderBeam>
);
}
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content to wrap |
size | 'sm' | 'md' | 'line' | 'md' | Size/type preset |
colorVariant | 'colorful' | 'mono' | 'ocean' | 'sunset' | 'colorful' | Color palette |
theme | 'dark' | 'light' | 'auto' | 'dark' | Background adaptation |
strength | number | 1 | Beam opacity 0–1, does not affect children |
duration | number | 1.96 / 2.4 | Animation cycle in seconds |
active | boolean | true | Play/pause with fade transition |
borderRadius | number | auto-detected | Override border radius in px |
brightness | number | 1.3 | Glow brightness multiplier |
saturation | number | 1.2 | Glow saturation multiplier |
hueRange | number | 30 | Hue rotation range in degrees |
staticColors | boolean | false | Disable hue-shift animation |
className | string | — | Class on wrapper div |
style | CSSProperties | — | Inline styles on wrapper div |
onActivate | () => void | — | Called when fade-in completes |
onDeactivate | () => void | — | Called when fade-out completes |
BorderBeam renders a wrapper <div> with three effect layers — all pointer-events: none, absolutely positioned, never affecting layout or interaction:
::after — beam stroke (conic gradient masked to the border edge)::before — inner glow layer[data-beam-bloom] — outer bloom/glow child <div>Animations use CSS @property for smooth, GPU-accelerated hue cycling.
Beam not visible:
background and border-radiusstrength is not 0active is trueBorder radius not matching:
borderRadius prop explicitly if the radius comes from a CSS class rather than inline styleEffect covers content / blocks clicks:
pointer-events: none by default — if this is happening, check for CSS conflicts in your wrapperAnimation not working in browser:
@property support: Chrome 85+, Safari 15.4+, Firefox 128+. Check caniuse.com/@propertySSR / Next.js:
'use client') in Next.js App Router