Animated Beam

PreviewCode

@/demos/AnimatedBeamDemo.tsx

import { Circle } from '@/demos/shared/circle'
import { Icons } from '@/demos/shared/icons'
import { AnimatedBeam } from '@/registry/magicui/animated-beam'

export function AnimatedBeamDemo() {
  let containerRef: HTMLDivElement | undefined
  let div1Ref: HTMLDivElement | undefined
  let div2Ref: HTMLDivElement | undefined
  let div3Ref: HTMLDivElement | undefined
  let div4Ref: HTMLDivElement | undefined
  let div5Ref: HTMLDivElement | undefined
  let div6Ref: HTMLDivElement | undefined
  let div7Ref: HTMLDivElement | undefined

  return (
    <div
      ref={containerRef}
      class="
        relative flex h-75 w-full items-center justify-center overflow-hidden
        p-10
      "
    >
      <div class="
        flex size-full max-h-50 max-w-lg flex-col items-stretch justify-between
        gap-10
      "
      >
        <div class="flex flex-row items-center justify-between">
          <Circle ref={div1Ref}>
            <Icons.googleDrive />
          </Circle>
          <Circle ref={div5Ref}>
            <Icons.googleDocs />
          </Circle>
        </div>
        <div class="flex flex-row items-center justify-between">
          <Circle ref={div2Ref}>
            <Icons.notion />
          </Circle>
          <Circle ref={div4Ref} class="size-16">
            <Icons.openai />
          </Circle>
          <Circle ref={div6Ref}>
            <Icons.zapier />
          </Circle>
        </div>
        <div class="flex flex-row items-center justify-between">
          <Circle ref={div3Ref}>
            <Icons.whatsapp />
          </Circle>
          <Circle ref={div7Ref}>
            <Icons.messenger />
          </Circle>
        </div>
      </div>

      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div1Ref} toRef={() => div4Ref} curvature={-75} endYOffset={-10} />
      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div2Ref} toRef={() => div4Ref} />
      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div3Ref} toRef={() => div4Ref} curvature={75} endYOffset={10} />
      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div5Ref} toRef={() => div4Ref} curvature={-75} endYOffset={-10} reverse />
      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div6Ref} toRef={() => div4Ref} reverse />
      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div7Ref} toRef={() => div4Ref} curvature={75} endYOffset={10} reverse />
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/animated-beam

bun

bunx shadcn@latest add @magicui-solid/animated-beam

yarn

yarn dlx shadcn@latest add @magicui-solid/animated-beam

npm

npx shadcn@latest add @magicui-solid/animated-beam

Examples

Uni-Directional

PreviewCode

@/demos/AnimatedBeamUnidirectionalDemo.tsx

import { Circle } from '@/demos/shared/circle'
import { Icons } from '@/demos/shared/icons'
import { AnimatedBeam } from '@/registry/magicui/animated-beam'

export function AnimatedBeamUnidirectionalDemo() {
  let containerRef: HTMLDivElement | undefined
  let div1Ref: HTMLDivElement | undefined
  let div2Ref: HTMLDivElement | undefined

  return (
    <div
      ref={containerRef}
      class="
        relative flex w-full max-w-125 items-center justify-center
        overflow-hidden p-10
      "
    >
      <div class="flex size-full flex-col items-stretch justify-between gap-10">
        <div class="flex flex-row justify-between">
          <Circle ref={div1Ref}>
            <Icons.user />
          </Circle>
          <Circle ref={div2Ref}>
            <Icons.openai />
          </Circle>
        </div>
      </div>

      <AnimatedBeam
        duration={3}
        containerRef={() => containerRef}
        fromRef={() => div1Ref}
        toRef={() => div2Ref}
      />
    </div>
  )
}

Bi-Directional

PreviewCode

@/demos/AnimatedBeamBidirectionalDemo.tsx

import { Circle } from '@/demos/shared/circle'
import { Icons } from '@/demos/shared/icons'
import { AnimatedBeam } from '@/registry/magicui/animated-beam'

export function AnimatedBeamBidirectionalDemo() {
  let containerRef: HTMLDivElement | undefined
  let div1Ref: HTMLDivElement | undefined
  let div2Ref: HTMLDivElement | undefined

  return (
    <div
      ref={containerRef}
      class="
        relative flex w-full max-w-125 items-center justify-center
        overflow-hidden p-10
      "
    >
      <div class="flex size-full flex-col items-stretch justify-between gap-10">
        <div class="flex flex-row justify-between">
          <Circle ref={div1Ref}>
            <Icons.user />
          </Circle>
          <Circle ref={div2Ref}>
            <Icons.openai />
          </Circle>
        </div>
      </div>

      <AnimatedBeam
        containerRef={() => containerRef}
        fromRef={() => div1Ref}
        toRef={() => div2Ref}
        startYOffset={10}
        endYOffset={10}
        curvature={-20}
      />
      <AnimatedBeam
        containerRef={() => containerRef}
        fromRef={() => div1Ref}
        toRef={() => div2Ref}
        startYOffset={-10}
        endYOffset={-10}
        curvature={20}
        reverse
      />
    </div>
  )
}

Multiple Inputs

PreviewCode

@/demos/AnimatedBeamMultipleInputsDemo.tsx

import { Circle } from '@/demos/shared/circle'
import { Icons } from '@/demos/shared/icons'
import { AnimatedBeam } from '@/registry/magicui/animated-beam'

export function AnimatedBeamMultipleInputsDemo() {
  let containerRef: HTMLDivElement | undefined
  let div1Ref: HTMLDivElement | undefined
  let div2Ref: HTMLDivElement | undefined
  let div3Ref: HTMLDivElement | undefined
  let div4Ref: HTMLDivElement | undefined
  let div5Ref: HTMLDivElement | undefined
  let div6Ref: HTMLDivElement | undefined
  let div7Ref: HTMLDivElement | undefined

  return (
    <div
      ref={containerRef}
      class="
        relative flex h-125 w-full items-center justify-center overflow-hidden
        p-10
      "
    >
      <div class="
        flex size-full max-w-lg flex-row items-stretch justify-between gap-10
      "
      >
        <div class="flex flex-col justify-center gap-2">
          <Circle ref={div1Ref}>
            <Icons.googleDrive />
          </Circle>
          <Circle ref={div2Ref}>
            <Icons.googleDocs />
          </Circle>
          <Circle ref={div3Ref}>
            <Icons.whatsapp />
          </Circle>
          <Circle ref={div4Ref}>
            <Icons.messenger />
          </Circle>
          <Circle ref={div5Ref}>
            <Icons.notion />
          </Circle>
        </div>
        <div class="flex flex-col justify-center">
          <Circle ref={div6Ref} class="size-16">
            <Icons.openai />
          </Circle>
        </div>
        <div class="flex flex-col justify-center">
          <Circle ref={div7Ref}>
            <Icons.user />
          </Circle>
        </div>
      </div>

      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div1Ref} toRef={() => div6Ref} />
      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div2Ref} toRef={() => div6Ref} />
      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div3Ref} toRef={() => div6Ref} />
      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div4Ref} toRef={() => div6Ref} />
      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div5Ref} toRef={() => div6Ref} />
      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div6Ref} toRef={() => div7Ref} />
    </div>
  )
}

Multiple Outputs

PreviewCode

@/demos/AnimatedBeamMultipleOutputsDemo.tsx

import { Circle } from '@/demos/shared/circle'
import { Icons } from '@/demos/shared/icons'
import { cn } from '@/lib/utils'
import { AnimatedBeam } from '@/registry/magicui/animated-beam'

export function AnimatedBeamMultipleOutputsDemo(props: { class?: string }) {
  let containerRef: HTMLDivElement | undefined
  let div1Ref: HTMLDivElement | undefined
  let div2Ref: HTMLDivElement | undefined
  let div3Ref: HTMLDivElement | undefined
  let div4Ref: HTMLDivElement | undefined
  let div5Ref: HTMLDivElement | undefined
  let div6Ref: HTMLDivElement | undefined
  let div7Ref: HTMLDivElement | undefined

  return (
    <div
      ref={containerRef}
      class={cn(`
        relative flex h-125 w-full items-center justify-center overflow-hidden
        p-10
      `, props.class)}
    >
      <div class="
        flex size-full max-w-lg flex-row items-stretch justify-between gap-10
      "
      >
        <div class="flex flex-col justify-center">
          <Circle ref={div7Ref}>
            <Icons.user />
          </Circle>
        </div>
        <div class="flex flex-col justify-center">
          <Circle ref={div6Ref} class="size-16">
            <Icons.openai />
          </Circle>
        </div>
        <div class="flex flex-col justify-center gap-2">
          <Circle ref={div1Ref}>
            <Icons.googleDrive />
          </Circle>
          <Circle ref={div2Ref}>
            <Icons.googleDocs />
          </Circle>
          <Circle ref={div3Ref}>
            <Icons.whatsapp />
          </Circle>
          <Circle ref={div4Ref}>
            <Icons.messenger />
          </Circle>
          <Circle ref={div5Ref}>
            <Icons.notion />
          </Circle>
        </div>
      </div>

      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div1Ref} toRef={() => div6Ref} duration={3} />
      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div2Ref} toRef={() => div6Ref} duration={3} />
      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div3Ref} toRef={() => div6Ref} duration={3} />
      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div4Ref} toRef={() => div6Ref} duration={3} />
      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div5Ref} toRef={() => div6Ref} duration={3} />
      <AnimatedBeam containerRef={() => containerRef} fromRef={() => div6Ref} toRef={() => div7Ref} duration={3} />
    </div>
  )
}

Import

import { AnimatedBeam } from '@/components/magicui/animated-beam'

Usage

<AnimatedBeam containerRef={containerRef} fromRef={fromRef} toRef={toRef} />

Props

AnimatedBeam

Prop	Type	Default	Description
class	string	-	The class name for the component.
containerRef	ref	-	The container ref.
fromRef	ref	-	The ref of the element from which the beam should start.
toRef	ref	-	The ref of the element to which the beam should end.
curvature	number	0	The curvature of the beam.
reverse	boolean	false	Whether the beam should be reversed.
duration	number	5	The duration of the beam.
delay	number	0	The delay of the beam.
repeat	number	Infinity	The number of times the beam animation should repeat.
repeatDelay	number	0	The delay between repeated beam animation cycles.
pathColor	string	gray	The color of the beam.
pathWidth	number	2	The width of the beam.
pathOpacity	number	0.2	The opacity of the beam.
gradientStartColor	string	#ffaa40	The start color of the gradient.
gradientStopColor	string	#9c40ff	The stop color of the gradient.
startXOffset	number	0	The start x offset of the beam.
startYOffset	number	0	The start y offset of the beam.
endXOffset	number	0	The end x offset of the beam.
endYOffset	number	0	The end y offset of the beam.

Original:

magicui.design/docs/components/animated-beam