Beam Glow States

Beam Glow States

Use the beam as a decorative state accent. Keep the state understandable through text, shape, contrast, and the correct semantic attribute when the animation is absent.

The API below was verified against border-beam 1.3.0. Recheck the official README and exported types when the installed version changes.

Install and import

Install the same package with the repository's package manager:

npm install border-beam
pnpm add border-beam
yarn add border-beam
bun add border-beam

The package requires React and React DOM 18 or newer. It ships ESM, CommonJS, and TypeScript declarations. It injects component-scoped styles, so do not import a separate CSS file.

Prefer the named import:

import { BorderBeam } from "border-beam";
import type {
  BorderBeamProps,
  BorderBeamSize,
  BorderBeamTheme,
  BorderBeamColorVariant,
} from "border-beam";

The default component export is also supported:

import BorderBeam from "border-beam";

In a Next.js App Router project, render it from a client component because it uses React state, effects, observers, and animation frames:

"use client";

import { BorderBeam } from "border-beam";

Choose the effect

Use these defaults by state:

• Loading or processing: pulse-inner, strength={0.55} to 0.75, duration={2.3} to 3.
• Selected or current: md or pulse-inner, strength={0.3} to 0.55, duration={3.2} to 5.
• Focus or short active feedback: sm or line, strength={0.35} to 0.6.
• High-priority live task: pulse-outside, strength={0.45} to 0.7; allow only one in a view.

Start with colorVariant="mono" for neutral product UI, ocean for cool technical states, sunset for warm urgency, and colorful for a rare high-salience moment.

Start with one mounted wrapper

Keep BorderBeam mounted and toggle active. Removing it when state becomes false skips the built-in fade-out.

<BorderBeam
  size="pulse-inner"
  colorVariant="ocean"
  theme="dark"
  strength={0.65}
  active={isWorking}
>
  <section className="task-card" aria-busy={isWorking}>
    <p>{isWorking ? "Generating layout options…" : "Layout options ready"}</p>
  </section>
</BorderBeam>

active fades in over 0.6s and fades out over 0.5s. Use onActivate and onDeactivate only when work must align with the completed visual transition.

Wire loading state

Make the loading state truthful before adding the beam:

<BorderBeam
  size="pulse-inner"
  colorVariant="ocean"
  strength={0.65}
  active={pending && !reduceMotion}
  onDeactivate={() => {
    // Optional: advance only after the 0.5s beam exit completes.
  }}
>
  <section className="beam-surface" aria-busy={pending}>
    <span className="status-dot" aria-hidden="true" />
    <span>{pending ? "Building preview…" : "Preview ready"}</span>
  </section>
</BorderBeam>

• Show a visible status label or progress value; never make the moving edge the only loading cue.
• Avoid showing the beam for operations that finish in roughly 150ms or less.
• Once shown, keep the loading presentation visible for about 400ms to 600ms to prevent a flash.
• Preserve layout between pending and complete states.
• Keep cancellation, retry, and error controls usable. The effect layers already use pointer-events: none.

Use line when the work belongs to one input or prompt bar. Use pulse-inner when the whole card is busy.

Wire selected or current state

Use the component state and the semantic state together:

<BorderBeam
  size="md"
  colorVariant="mono"
  staticColors
  duration={4.2}
  strength={0.42}
  active={selected && !reduceMotion}
  className="beam-card"
>
  <button
    type="button"
    className="beam-surface"
    aria-pressed={selected}
    onClick={onSelect}
  >
    {label}
  </button>
</BorderBeam>

• Use aria-selected for tabs, listbox options, grid cells, and similar selection widgets.
• Use aria-current for the current page, step, date, or location.
• Use aria-pressed only for toggle buttons.
• Keep a static selected background or outline. The beam should add attention, not carry meaning by itself.
• Slow persistent selected beams down. Reserve the faster default travel for loading or brief activation.

For a large collection, animate only the newly selected item for 800ms to 1200ms, then retain the static selected style. Do not run a beam on every selected item indefinitely.

Wire focus and active state

Track focus on the wrapper because all standard HTMLDivElement attributes and capture handlers are forwarded:

const [focused, setFocused] = useState(false);

<BorderBeam
  size="sm"
  colorVariant="mono"
  strength={0.45}
  active={focused && !reduceMotion}
  className="beam-inline"
  onFocusCapture={() => setFocused(true)}
  onBlurCapture={(event) => {
    const next = event.relatedTarget as Node | null;
    if (!next || !event.currentTarget.contains(next)) setFocused(false);
  }}
>
  <button className="beam-surface">Run</button>
</BorderBeam>

Keep the ordinary :focus-visible outline. Pointer hover alone should not start a high-intensity beam, and a pressed state should still have immediate scale, fill, or contrast feedback.

When states overlap, resolve them explicitly:

const beamState =
  pending ? "loading" :
  selected ? "selected" :
  focused ? "focus" :
  "idle";

const beamProps = {
  loading: {
    size: "pulse-inner",
    colorVariant: "ocean",
    duration: 2.6,
    strength: 0.65,
  },
  selected: {
    size: "md",
    colorVariant: "mono",
    duration: 4.2,
    strength: 0.42,
    staticColors: true,
  },
  focus: {
    size: "sm",
    colorVariant: "mono",
    duration: 2.4,
    strength: 0.45,
    staticColors: true,
  },
} as const;

const activeProps = beamState === "idle" ? null : beamProps[beamState];

<BorderBeam
  {...(activeProps ?? { size: "md" as const })}
  active={activeProps !== null && !reduceMotion}
>
  <div className="beam-surface" data-state={beamState}>
    {children}
  </div>
</BorderBeam>

Use loading above selection, selection above focus, and focus above hover unless the product's state model says otherwise.

Handle reduced motion

Pulse presets stop their animations under prefers-reduced-motion: reduce. Rotate and line presets should also be disabled by the consumer. Use the project's media-query hook or a small client hook:

function useReducedMotion() {
  const [reduced, setReduced] = useState(false);

  useEffect(() => {
    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
    const update = () => setReduced(media.matches);
    update();
    media.addEventListener("change", update);
    return () => media.removeEventListener("change", update);
  }, []);

  return reduced;
}

Provide a static fallback on the child surface:

.beam-surface {
  border: 1px solid rgb(255 255 255 / 0.12);
}

[data-state="selected"] {
  border-color: rgb(140 155 255 / 0.7);
  box-shadow: 0 0 0 3px rgb(100 120 255 / 0.12);
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  [data-state="loading"] {
    border-color: rgb(100 150 255 / 0.68);
  }
}