3D Beam Circle

Concentric elliptical orbits with glowing traveler badges. No Three.js - SVG paths plus a lightweight animation loop. Sibling of Beam Circle (icon rings with motion).

Default

Semi-circle arcs with shipped tech marks (React, TypeScript, Tailwind) and a Next.js hub. Icons install under icons/.

Loading…

Installation

CLI

npx @sonojs/ui@latest add 3d-beam-circle

Usage

page.tsx

"use client"

import {
  BeamCircle3D,
  NextjsIcon,
  ReactIcon,
} from "@/components/3d/beam-circle-3d"

export default function Page() {
  return (
    <BeamCircle3D
      className="aspect-[8/3] w-full"
      mode="semi-circle"
      centerGlow
      centerNodeSize={48}
      centerContent={<NextjsIcon size={44} />}
      orbits={[
        {
          id: 0,
          radiusFactor: 0.28,
          speed: 12,
          size: 44,
          children: <ReactIcon size={38} />,
        },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
mode	"semi-circle" · "full-circle"	"semi-circle"	Half-dome from the bottom, or full rings.
orbits	BeamOrbitConfig[]	bundled demo	Per-orbit radius, speed, colors, direction, and optional badge children.
orbitDirection	"cw" · "ccw"	"cw"	Default travel direction for all orbits.
showArcs	boolean	true	Draw the orbit path strokes.
centerContent	ReactNode	-	Node at the orbit origin.
centerGlow	boolean	true	Soft glow behind the center node.
animationPaused	boolean	false	Freeze all travelers.
speedMultiplier	number	1	Global speed scale.
viewBoxWidth	number	800	SVG viewBox width.
viewBoxHeight	number	440	SVG viewBox height.
className	string	-	Classes on the outer wrapper.