Skip to content
Mox UI

Animated beam

Animated light beams connecting elements.

Installation

  1. 1

    Install the packages

    pnpm add motion clsx tailwind-merge
  2. 2

    Add the utility file

    lib/utils.ts
    import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}
  3. 3

    Copy and paste the code into your project

    Loading source…
  4. 4

    Update the import paths to match your project

    Point @/lib/utils to your utility file if your path aliases differ.

Usage

app/page.tsx
"use client";
import { useRef } from "react";import { AnimatedBeam } from "@/components/ui/animated-beam";
export default function Example() {  const containerRef = useRef<HTMLDivElement>(null);  const fromRef = useRef<HTMLDivElement>(null);  const toRef = useRef<HTMLDivElement>(null);
  return (    <div      ref={containerRef}      className="relative flex h-48 w-full max-w-md items-center justify-between rounded-xl border p-8"    >      <div        ref={fromRef}        className="relative z-10 flex size-12 items-center justify-center rounded-xl border bg-background"      >        A      </div>      <div        ref={toRef}        className="relative z-10 flex size-12 items-center justify-center rounded-xl border bg-background"      >        B      </div>      <AnimatedBeam        containerRef={containerRef}        fromRef={fromRef}        toRef={toRef}      />    </div>  );}

Props

PropTypeDefaultDescription
containerRef*React.RefObject<HTMLElement | null>Default: -Ref to the relatively positioned container holding both connected elements.
fromRef*React.RefObject<HTMLElement | null>Default: -Ref to the element where the connection starts.
toRef*React.RefObject<HTMLElement | null>Default: -Ref to the element where the connection ends.
curvaturenumberDefault: 0Vertical offset of the curve's control point in pixels. Positive values bend upward.
reversebooleanDefault: falseReverses the direction of the moving beam.
durationnumberDefault: 2.5Duration of each animation cycle in seconds.
delaynumberDefault: 0Delay before the animation starts, in seconds.
pathColorstringDefault: "currentColor"Color of the static connection.
pathWidthnumberDefault: 1.5Width of the static connection in pixels.
pathOpacitynumberDefault: 0.08Opacity of the static connection, from 0 to 1.
gradientStartColorstringDefault: "#3b82f6"Starting color of the beam gradient.
gradientStopColorstringDefault: "#8b5cf6"Ending color of the beam gradient.
startXOffsetnumberDefault: 0Horizontal offset of the starting point in pixels.
startYOffsetnumberDefault: 0Vertical offset of the starting point in pixels.
endXOffsetnumberDefault: 0Horizontal offset of the ending point in pixels.
endYOffsetnumberDefault: 0Vertical offset of the ending point in pixels.
classNamestringDefault: -Extra classes merged onto the root SVG.
styleReact.CSSPropertiesDefault: -Inline styles applied to the root SVG.

Colored beams travel between the connected nodes. Connections stay visible without movement when reduced motion is enabled.

Credits and license

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Mox UI is appreciated when using a component.
  • Please don't resell the components as your own kit.
Contact Mox UI