Beam Circle

Dashed rings with icons that orbit a center hub. Built with motion. Respects prefers-reduced-motion.

Default

Four orbits with shipped tech marks (React, TypeScript, Tailwind, Next.js). Icons install with the component under icons/.

Loading…

Installation

CLI

npx @sonojs/ui@latest add beam-circle

Also needsnpm i motion

Usage

page.tsx

"use client"

import {
  BeamCircle,
  ReactIcon,
  TypescriptIcon,
} from "@/components/3d/beam-circle"

export default function Page() {
  return (
    <BeamCircle
      size={320}
      centerIcon={<ReactIcon size={28} />}
      orbits={[
        {
          id: 1,
          radiusFactor: 0.4,
          speed: 10,
          icon: <TypescriptIcon />,
          iconSize: 28,
        },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
size	number	300	Stage diameter in pixels.
centerIcon	ReactNode	<SunIcon />	Content in the center hub.
orbits	OrbitConfig[]	bundled demo	`id`, `radiusFactor`, `speed`, `icon`, `iconSize`, optional `orbitColor` / `orbitThickness`.
className	string	-	Classes on the outer wrapper.