An integrations diagram: sources on the left feed a central hub that sends to an output, with a light pulse running along each curved connection. Beams re-route on resize.
npx shadcn@latest add https://hyperblur.dev/r/animated-beam.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/animated-beam.tsx.
import { AnimatedBeam } from "@/components/hyperblur/animated-beam"
<AnimatedBeam color="#7fb3ff" duration={2.5} className="max-w-md" />| Prop | Type | Default | Description |
|---|---|---|---|
| sources | { icon: ReactNode; label: string }[] | Email, Calendar, Chat, Database | Nodes stacked on the left. Each sends a beam to the hub. |
| hub | { icon: ReactNode; label: string } | Sync engine | Central node that collects every source. |
| output | { icon: ReactNode; label: string } | Workspace | Node on the right that receives the hub beam. |
| curvature | number | 0.5 | How far the curves bow, from 0 (straight lines) to 1. |
| duration | number | 3 | Seconds for a pulse to travel one beam. |
| color | string | "#2f7bff" | Pulse and hub glow color. |