# Border beam An animated glow that rides the border of a card, button or input. It is a React wrapper component, pure CSS layers plus a small shared rAF loop for the pulse types. npm package `border-beam`. ## When to use ### Where it goes The author's placement rules. Follow them before the general list below. - **Loading that lasts longer than 3 seconds**: wrap the element doing the work (the prompt input, the result card) and set `active` from the real loading flag. Shorter waits get no beam. - **Highlighting a component**, such as a prompt input or a CTA button, uses a Pulse type: - a **button**: `size="pulse-inner"` (the glow breathes inside the button); - an **input**: `size="pulse-outside"` (the glow blooms outside the field). - **An input that loads after the user submits text** (search, ask, command bar): `size="line"`, active from submit until results arrive. More situations it fits: - An AI chat input or composer while the model is streaming or an agent is working: `size="md"` with `active={isStreaming}`. The two families: | Family | Types (`size`) | Motion | | --- | --- | --- | | Rotate | `md` (Large), `line`, `sm` | A beam travels around the border (`line`: along the bottom edge) | | Pulse | `pulse-inner`, `pulse-outside` | No travel; the glow breathes in place | ### When not to use - Static emphasis that never changes state. A plain border or shadow says the same thing with no paint cost. - Many instances on one screen (every row of a list or table). Each beam repaints masked, filtered layers every frame. - Elements whose content must spill outside their box (open dropdowns, tooltips, focus rings drawn outside). Every type except `pulse-outside` clips the wrapper with `overflow: hidden`. - Non-React stacks on the web. The web package is React only. ## Install ```bash npm install border-beam pnpm add border-beam yarn add border-beam ``` ```tsx import { BorderBeam } from 'border-beam'; ``` - React component. Peer dependencies: `react >= 18`, `react-dom >= 18`. No runtime dependencies. - ESM (`dist/index.es.js`) and CommonJS (`dist/index.cjs`) builds, with types. A default export is also provided. - The package ships no `"use client"` directive and uses hooks. In the Next.js App Router, render it from a file that starts with `"use client"`. - Server rendering works: instance ids come from `useId`, and the component renders its own `