Border Beam

Overview

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.

Install

Usage

Component Code

Example Production Use Case

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.

Best Used For

• Pricing cards, featured plans, and upgrade prompts where one option needs controlled emphasis.
• Login, waitlist, and demo-request panels where the container should feel active without hurting form usability.
• Product feature cards, proof blocks, and CTAs where the border can guide attention without changing layout.

Not For

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.

Performance Budget

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.

Accessibility and Mobile

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.

Common Mistakes

• Adding Border Beam to every card on the page.
• Letting the glow reduce text contrast or obscure form fields.
• Using the beam as the only way to show selection, focus, error, or loading state.
• Making the border animation louder than the actual CTA.