Animated Beam

Installation

pnpm dlx @glinui/cli@latest add animated-beam

Credits. Adapted from Magic UI (MIT, (c) Magic UI). SVG path measurement with Web Animations instead of motion, resize aware anchors, RTL offsets, token colors and reduced motion levels. Attribution details.

Prefer the package? npm install @glinui/ui @glinui/motion @glinui/tokens

Usage

The container must be positioned (relative) and contain both anchors. Render the beam after the anchors, with the same refs. The beam draws in the container coordinate space, so avoid transforms on the container.

The three demos use only Phosphor icons, never brand logos.

Engines: the `engine` prop is not applicable. SVG path gradient measured from layout; path driven, engines do not apply.

<AnimatedBeam containerRef={container} fromRef={a} toRef={b} reverse />

<AnimatedBeam containerRef={container} fromRef={a} toRef={b} reverse />

<AnimatedBeam containerRef={container} fromRef={top} toRef={hub} curvature={-40} />
<AnimatedBeam containerRef={container} fromRef={bottom} toRef={hub} curvature={40} delay={0.6} />
<AnimatedBeam containerRef={container} fromRef={hub} toRef={out} delay={1.2} />

<AnimatedBeam containerRef={container} fromRef={top} toRef={hub} curvature={-40} />
<AnimatedBeam containerRef={container} fromRef={bottom} toRef={hub} curvature={40} delay={0.6} />
<AnimatedBeam containerRef={container} fromRef={hub} toRef={out} delay={1.2} />

Accessibility

• Decorative connector: aria-hidden, not focusable, pointer-events none.
• If the connection carries meaning, state it in text next to the anchors.
• The track keeps its contrast with the line token and never overlaps text.

Reduced Motion

At motion level full a gradient segment travels the path. With prefers-reduced-motion or level none or subtle, the beam is a static gradient line. It also pauses offscreen and in background tabs.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { AnimatedBeam } from "@glinui/ui"