Add a moving beam of light around cards, forms, CTAs, and feature panels to guide attention without changing the component’s real structure.
Border Beam adds a moving line of light around a real UI surface.
It works best on cards, forms, pricing panels, feature blocks, login boxes, product callouts, and CTAs where the border needs a little attention without turning the whole component into a fire alarm.
Border Beam is not the content. It is the accent. The card, form, button, or panel should already make sense before the beam appears. The page job is emphasis: the moving border should guide the eye toward something useful, trusted, or worth clicking.
The production risk is overuse. A border beam feels premium when one or two surfaces earn it. Put it on every card and the page starts looking like a server rack auditioning for a nightclub.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
A SaaS pricing page can use Border Beam around the recommended plan card. The beam gives the preferred option a quiet premium signal while the plan name, price, features, and CTA remain fully readable. The outcome is emphasis: the eye lands where the decision is supposed to happen.
Not for dense card grids, long reading sections, dashboards, tables, destructive actions, or any UI where every container competes for attention.
Not for forms where the animated border distracts from labels, errors, validation, or submit state.
Animate the beam with compositor-friendly transforms where possible, avoid layout-triggering border changes, keep glow blur restrained, and do not run dozens of beams at once. Pause or simplify decorative border motion when the section is offscreen.
The beam is decorative. Keep it hidden from assistive technology, preserve visible focus states, and make sure the border animation never becomes the only selected, error, or active-state indicator. On mobile and reduced motion, use a static border, subtle highlight, or no beam.
| Prop | Type | Default | Description |
|---|---|---|---|
size | string | md | Chooses the beam motion family and sizing preset. |
colorVariant | string | colorful | Chooses the color palette used by the beam. |
theme | string | light | Sets the light, dark, or system-aware beam tuning. |
active | boolean | true | Turns the beam animation on or off. |
strength | number | 1 | Scales the beam intensity. |
duration | number | 2 | Time for the beam to complete a loop. |
beamWidth | number | 2 | Thickness of the animated border beam. |
backgroundColor | color | #f4f5f7 | Card or container background color. |
Use Border Beam when one important surface needs a moving border accent: a pricing card, CTA panel, form container, or featured product block.
No. It works best as a priority signal. If every card has a beam, no card is important anymore.
Yes, but the form must remain fully usable. Labels, inputs, errors, focus states, and submit feedback should stay clearer than the border effect.
Use a static border, a subtle glow, or no effect. Do not keep looping border motion for users who prefer reduced motion.
No, if it only decorates real HTML content. The wrapped card, form, heading, and CTA should remain normal markup.
Yes. A custom version should define beam color, thickness, radius behavior, motion timing, theme variants, focus safety, reduced-motion fallback, source handoff, and implementation notes.
Need a custom effect? Tell us what to create.
