> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Animated Beam

> Decorative animated beam effect.

* **Location**: `sabo/src/components/ui/animated-beam.tsx`

<Frame>
  <div className="rounded-xl" style={{ overflow: "hidden", border: "1px solid #e5e7eb" }}>
    <iframe
      className="w-full"
      style={{ height: "150px", pointerEvents: "none" }}
      title="Animated Beam"
      loading="lazy"
      scrolling="no"
      srcDoc={`<!doctype html><html><head><meta charset='utf-8'/><meta name='viewport' content='width=device-width,initial-scale=1'/><style>
  *{box-sizing:border-box}
  body{margin:0;background:#ffffff;height:130px;display:flex;align-items:center;justify-content:center}
  .wrap{position:relative;width:460px;height:60px}
  .beam{position:absolute;left:-50%;top:50%;width:200%;height:10px;transform:translateY(-50%);
    background:linear-gradient(90deg,rgba(17,24,39,0),rgba(17,24,39,.15) 30%,rgba(17,24,39,.7) 50%,rgba(17,24,39,.15) 70%,rgba(17,24,39,0));
    filter:blur(3px);animation:move 2.2s ease-in-out infinite;}
  @keyframes move{0%{transform:translate(-50%,-50%)}50%{transform:translate(0,-50%)}100%{transform:translate(50%,-50%)}}
</style></head><body>
  <div class='wrap'><div class='beam'></div></div>
</body></html>`}
    />
  </div>
</Frame>

<Info>
  The preview shows a simplified version. The actual component dynamically draws an SVG path between two elements within a container using React refs.
</Info>

## When to use

* Draw attention to relationships or flows between elements.
* Use decoratively; avoid covering critical content.

## Usage

```tsx sabo/src/components/ui/animated-beam.tsx theme={null}
"use client";
import { useRef } from "react";
import { AnimatedBeam } from "@/components/ui/animated-beam";

export function Example() {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const aRef = useRef<HTMLDivElement | null>(null);
  const bRef = useRef<HTMLDivElement | null>(null);

  return (
    <div ref={containerRef} className="relative grid grid-cols-2 items-center gap-8 p-6 border rounded-xl">
      <div ref={aRef} className="h-16 rounded-md border bg-background" />
      <div ref={bRef} className="h-16 rounded-md border bg-background" />
      <AnimatedBeam containerRef={containerRef} fromRef={aRef} toRef={bRef} curvature={40} />
    </div>
  );
}
```

## Key props

<ParamField path="containerRef" type="RefObject<HTMLElement | null>">
  Reference to the container element that holds the beam's coordinate system.
</ParamField>

<ParamField path="fromRef" type="RefObject<HTMLElement | null>">
  Reference to the starting element where the beam originates.
</ParamField>

<ParamField path="toRef" type="RefObject<HTMLElement | null>">
  Reference to the target element where the beam points.
</ParamField>

<ParamField path="curvature" type="number" default="0">
  Controls the curve of the beam path. Higher values create more pronounced curves.
</ParamField>

<ParamField path="reverse" type="boolean" default="false">
  Reverses the gradient direction of the beam animation.
</ParamField>

<ParamField path="duration" type="number">
  Animation duration in seconds (randomized by default).
</ParamField>

<ParamField path="pathColor" type="string" default="gray">
  Color of the beam's path line.
</ParamField>

<ParamField path="pathWidth" type="number" default="2">
  Thickness of the beam's path line in pixels.
</ParamField>

<ParamField path="gradientStartColor" type="string" default="#ffaa40">
  Start color of the animated gradient beam.
</ParamField>

<ParamField path="gradientStopColor" type="string" default="#9c40ff">
  End color of the animated gradient beam.
</ParamField>

## Styling tip

* Place inside a relatively positioned, rounded container; keep contrast subtle.
* Mark purely decorative instances with `aria-hidden="true"`.
