domains / families / design / beam-glow-states

beam-glow-states

separate

Create React loading, processing, selected, current, focus, and pressed states with the border-beam package's animated edge glow. Use when a card, button, input, tab, option, task panel, or agent surface needs a restrained traveling or breathing beam; includes installation, imports, prop selection, state wiring, reduced motion, accessibility, and performance and layout guardrails.

When to use

• React loading states
• React processing states
• React selected states
• React current states
• React focus states
• React pressed states
• border-beam package installation
• border-beam prop selection

When not to use

• Operations finishing in roughly 150ms or less
• Using the moving edge as the only loading cue
• Running a beam on every selected item indefinitely

Skill page

Source