AnimatedBeam
animated-beamDraws animated directional beams between referenced elements.
Usage
Flow left to right
Connect two sets of nodes in the container, and the beam sweeps from left to right along the curve (reverse=false).
<div ref={container} className="relative flex items-center justify-between">
<div ref={l1}>...</div>
<div ref={hub}>...</div>
<AnimatedBeam containerRef={container} fromRef={l1} toRef={hub} curvature={30} reverse={false} />
</div>Gathering around
The light beam flows into the center on the left side and in the opposite direction on the right side, creating the impression that data is gathered into the center.
{/* The left two lines reverse=false flow into the center, the right two lines reverse=true flow into the center */}
<AnimatedBeam containerRef={container} fromRef={l1} toRef={hub} curvature={30} reverse={false} />
<AnimatedBeam containerRef={container} fromRef={hub} toRef={r1} curvature={-30} reverse={true} />Right to left flow
The overall reverse direction, the beam sweeps from right to left, expressing the reflow/response direction.
<AnimatedBeam containerRef={container} fromRef={l1} toRef={hub} curvature={30} reverse={true} />When to Use
Use it when you want to connect two DOM nodes in the canvas with a flowing curve (architecture diagram, integration diagram, AI data flow, "convergence to hub" animation). It relies on containerRef/fromRef/toRef to measure the endpoint geometry and draw SVG curves, which can be stacked to form a network. To orbit the light point of a single container border, use BorderBeam; to rotate the icon along a circle, use OrbitingCircles.
Import
import { AnimatedBeam } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| containerRef* | RefObject<HTMLElement | null> | — | Positioning reference container, must be position:relative |
| fromRef* | RefObject<HTMLElement | null> | — | starting element ref |
| toRef* | RefObject<HTMLElement | null> | — | end element ref |
| curvature | number | 0 | Curvature (>0 convex) |
| reverse | boolean | false | Beam reverse flow |
| duration | number | 4 | Duration of one pass in seconds |
| delay | number | 0 | Start delay in seconds |
| pathColor | string | var(--color-border) | Base path color |
| pathWidth | number | 2 | Base path width |
| pathOpacity | number | 0.2 | Base path opacity |
| gradientStartColor | string | var(--color-chart-1) | Beam-gradient start color |
| gradientStopColor | string | var(--color-chart-2) | Beam-gradient end color |
| startXOffset / startYOffset | number | 0 | Start-point offset |
| endXOffset / endYOffset | number | 0 | End-point offset |
| className | string | — | Class name forwarded to the SVG |
Usage Guidelines
- This client component measures refs, so its consumer must use
"use client". ThecontainerRefelement must useposition: relative, or the path coordinates will be misaligned. reversecontrols the horizontal scan direction independently of endpoint order:falsemoves left to right andtruemoves right to left. For beams converging on a center node, reverse the beam on the right.- Token-valued color props need the
--color-prefix; see [[hulian-token-color-var-needs-color-prefix]]. - Endpoints and the beam share a container. Give endpoints a layer such as
z-10so they render above the beam.
Related
BorderBeam · ShineBorder · GlareHover · Lens · OrbitingCircles · ProgressiveBlur