design-infraReport a problem or share feedback← Catalog
Border Beam
curatedfreelibrariesdev/border-beam
Animated traveling or breathing glow around any element (cards, inputs, buttons). Colour variants colorful/mono/ocean/sunset.
$
pnpm add border-beamnpm deps: border-beam
Our notes
Use on ONE live element per screen. Wrapped by @oc/beam-card. theme prop defaults to dark — set theme='light' on light surfaces.- Source
- libraries.dev
- Kind
- package
- Categories
- card, background
- Use as
- wrapper — wraps your existing element
- Applies to
- cardbuttoninput
- Motion
- on loop · medium · css · low cost · respects reduced motion
- Tags
- npm, mit
- Licence
- MIT (packages). Pro subscription adds a Studio + agent skills.
- Live demo
- libraries.dev
- Docs
- libraries.dev
Similar
Compare all 4 →- Liquid Glass (@samasante/liquid-glass)liquidglass/liquid-glassWrap any styled box in <Glass> (your translucent background is the tint; children stay crisp; optics via the optics prop). True refraction of the live page is Chrome/Edge only (backdrop-filter: url()); Safari/Firefox fall back to frost + tint + edge light. To bend in every browser, give it geometry (size + center) to refract its own children, or refract={copy} / src for images, video and canvas (WebGL). Headless — tint it with your tokens. v0.1.x: pin the version; use one or two lenses per screen and check text contrast over busy backgrounds. React >=18 peer, zero runtime deps, MIT.
- Hover Border Gradientaceternity/hover-border-gradientGradient border that sweeps on hover — for a single standout CTA button.
- Noise Backgroundaceternity/noise-backgroundAnimated gradient + noise texture. Works for editorial/brutalist when toned down.