Animated Beam

An animated light beam that travels along a path between two elements. It updates as the elements resize and can be customized with colors and animation settings. Use it to highlight connections between parts of a layout.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/animated-beam

npx layro-cli add @magicuidesign/animated-beam

npx layro-cli add @magicuidesign/animated-beam

bunx layro-cli add @magicuidesign/animated-beam

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { useEffect, useId, useState, type RefObject } from "react"
import { motion } from "motion/react"

import { cn } from "@/lib/utils"

export interface AnimatedBeamProps {
  className?: string
  containerRef: RefObject<HTMLElement | null> // Container ref
  fromRef: RefObject<HTMLElement | null>
  toRef: RefObject<HTMLElement | null>
  curvature?: number
  reverse?: boolean