Klyv Animated Beam

Component 47

About

A curved connector between two real elements with light pulsing along it. It re-measures, so it survives a reflow.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Klyv Animated Beam to your project and fits it to your theme.

Code

How Klyv Animated Beam is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useRef } from "react";
import { Cloud, CreditCard, Database, Landmark, Shield, Wallet } from "lucide-react";
import { AnimatedBeam } from "@/components/ui/klyv-animated-beam";
import { IconTile } from "@/components/ui/klyv-animated-beam-utils/components-IconTile-IconTile";
import { Surface } from "@/components/ui/klyv-animated-beam-utils/components-Surface-Surface";
import { Text } from "@/components/ui/klyv-animated-beam-utils/components-Text-Text";

function BeamExample() {
  const container = useRef<HTMLDivElement>(null)
  const wallet = useRef<HTMLDivElement>(null)
  const card = useRef<HTMLDivElement>(null)
  const bank = useRef<HTMLDivElement>(null)
  const core = useRef<HTMLDivElement>(null)
  const ledger = useRef<HTMLDivElement>(null)
  const vault = useRef<HTMLDivElement>(null)

  const node = (ref: React.RefObject<HTMLDivElement>, icon: typeof Wallet, label: string) => (
    <div ref={ref} className="relative z-10 flex flex-col items-center gap-1.5">
      <Surface
        variant="floating"
        className="h-12 w-12 items-center justify-center rounded-full border border-line"
      >
        <IconTile icon={icon} tone="muted" size="sm" />
      </Surface>
      <Text size="micro" tone="faint">
        {label}
      </Text>
    </div>
  )

  return (
    <div
      ref={container}
      className="relative flex w-full items-center justify-between gap-6 overflow-hidden rounded-[var(--radius-card)] border border-line bg-surface p-8"
    >
      <div className="flex flex-col gap-8">
        {node(wallet, Wallet, 'Wallet')}
        {node(card, CreditCard, 'Cards')}
        {node(bank, Landmark, 'Bank')}
      </div>

      {node(core, Cloud, 'Core')}

      <div className="flex flex-col gap-8">
        {node(ledger, Database, 'Ledger')}
        {node(vault, Shield, 'Vault')}
      </div>

      <AnimatedBeam containerRef={container} fromRef={wallet} toRef={core} curvature={-34} duration={2.6} />
      <AnimatedBeam containerRef={container} fromRef={card} toRef={core} curvature={0} duration={2.6} delay={0.5} />
      <AnimatedBeam containerRef={container} fromRef={bank} toRef={core} curvature={34} duration={2.6} delay={1} />
      <AnimatedBeam containerRef={container} fromRef={core} toRef={ledger} curvature={-28} duration={2.2} delay={0.8} />
      <AnimatedBeam containerRef={container} fromRef={core} toRef={vault} curvature={28} duration={2.2} delay={1.4} />
    </div>
  )
}

export default function Demo(){return <div data-component-demo className="flex min-h-screen w-full items-center justify-center bg-canvas p-8 text-ink"><div className="w-full max-w-[620px]"><BeamExample /></div></div>}