Beam Network

New

Preview

Customize

PresetOne to many (hub)

Curvearc

BendFlat at the hub

Curvature0.18

TriggerAlways

TimingIn sync

Duration2.4s

Pause1.0s

Node size56px

Accent

Usage

import { BeamNetwork } from "@/components/uibrik/beam-network/beam-network";

<BeamNetwork nodes={nodes} links={links} />

Installation

$npx shadcn@latest add https://uibrik.com/r/beam-network.json

Install the packages
$npm install motion
Add the cn helper
Imports cn from @/lib/utils, which shadcn init creates. Add it by hand without shadcn.

Copy the source into your project

components/uibrik/beam-network/beam-network.tsx

"use client";

import { useEffect, useId, useMemo, useRef, useState, type CSSProperties, type ReactNode } from "react";
import { animate, motion, useMotionValue, useReducedMotion, useTransform, type MotionValue } from "motion/react";
import { cn } from "@/lib/utils";

/** One point on the canvas. Leave `x` and `y` out to have it placed from the links. */
export type BeamNode = {
  id: string;
  /** What sits in the circle: an icon, a logo, an initial. */
  icon?: ReactNode;
  /** Small caption under the circle. */
  label?: string;
  /** Position across the canvas, 0 to 100. */
  x?: number;
  /** Position down the canvas, 0 to 100. */
  y?: number;
  /** Diameter in px. Falls back to `nodeSize`. */
  size?: number;
};

/** A line between two nodes. A beam runs from `from` to `to`. */
export type BeamLink = {
  from: string;

Adds the files to components/uibrik/beam-network and installs motion. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/beam-network.

Props

BeamNetwork

curve: Type "arc" | "smooth" | "straight"; "arc"; Shape of the lines.
bend: Type "hub" | "edge"; "hub"; Which end of an arc runs flat: lines flatten into the busiest node, or sweep in from the outer nodes.
curvature: Type number; 0.18; How far arcs lean. Negative flips them.
trigger: Type "always" | "hover"; "always"; Show beams all the time or only on the lines of the node you point at.
timing: Type "sync" | "random"; "sync"; Fire every beam together and keep them in step, or give each its own speed and rests.
duration: Type number; 2.4; Seconds one beam takes to cross its line. In random, each pass varies around this.
pause: Type number; 1; Rest between a beam's passes. In random, each rest varies around this.
nodeSize: Type number; 56; Default circle diameter.
showLabels: Type boolean; false; Show each node's label under its circle.
accent: Type string; "#3b82f6"; Beam colour.
nodesrequired: Type { id: string; icon?: ReactNode; label?: string; x?: number; y?: number; size?: number }[]; –; The circles. Leave x and y out to place them from the links.
linksrequired: Type { from: string; to: string; curvature?: number; bend?: "hub" | "edge"; bidirectional?: boolean }[]; –; The lines. A beam runs from `from` to `to`.
direction: Type "horizontal" | "vertical"; "horizontal"; Which way unplaced nodes flow: columns or rows.
height: Type number; 360; Canvas height in px.
className: Type string; –; Classes for the canvas.