Jakubantalik

Jakubantalik / border-beam

Public

Animated border beam effect for React

beam.jakubantalik.com beam design effect glow motion
509
29
100% credibility
Found Apr 15, 2026 at 74 stars 5x -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

A lightweight React component that wraps any UI element to add a smooth, traveling animated glow around its border.

How It Works

1
👀 Spot the Magic Glow

You see a cool traveling light effect around buttons and cards on a demo page that makes them pop.

2
💡 Decide to Add It

You think, 'I want that shiny border on my own website or app to make things look alive and fun.'

3
📥 Bring It Home

You grab the border beam tool and slip it into your project easily.

4
✨ Wrap Your Stuff

You hug your card, button, or input box with the border beam, and instantly a glowing light starts traveling around it.

5
🎨 Tweak the Look

You pick a color vibe like rainbow or ocean, choose small or big size, and dial the glow strength to match your style.

6
⚡ Fine-Tune the Dance

You set how fast the light travels or pause it when needed, watching it adapt to light or dark backgrounds.

🎉 Glow Up Complete

Your buttons, cards, and bars now have that mesmerizing beam, making your whole creation feel modern and exciting.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 74 to 509 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is border-beam?

border-beam delivers a lightweight TypeScript React component for adding animated border beam effects to cards, buttons, inputs, or search bars. Wrap any element, and it overlays a smooth traveling glow that auto-detects border radius for seamless fit. It solves the hassle of crafting animated border CSS or animated border gradient CSS from scratch, with presets for border beam animation, border beam button styles, or animated border line glows.

Why is it gaining traction?

Preset sizes like compact "sm" for buttons, full "md" borders, or bottom-only "line" travel stand out, alongside color variants (rainbow colorful, mono grayscale, ocean blues, sunset warms) and auto/light/dark themes. Strength, duration, and play/pause props let you tune intensity without bloat, while GPU-accelerated smoothness handles animated border transparent background or Tailwind integrations effortlessly. Devs hook on the quick-start demo and props for border beam component customization over generic animated border CSS generators.

Who should use this?

React frontend devs building dashboards, SaaS UIs, or landing pages wanting instant polish on buttons, cards, or search inputs. Perfect for beams border accents in animated GitHub readmes, profiles, banners, icons, or logos—think border beam animation elevating forms without React Native tweaks or heavy libraries.

Verdict

Solid for prototyping eye-catching UIs with excellent docs and interactive demo; drop-in ease beats rolling your own animated border button CSS. At 33 stars and 1.0% credibility, it's immature—low adoption means vet browser support (Chrome 85+) and add tests for production.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.