# Integration Beams (Moonarc)

The product in the middle, its integrations around it, and data travelling along the lines between them: up to eight on the lines, more on a ring around the product. The drawing is decoration hidden from screen readers; the integrations are also a real list under it, with links where they have one. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/integration-beams` (license key required)
- Tier B · category section · trigger always
- Readout: `<IntegrationBeams hub={{ src }} integrations={[{ name, logo, href }]} orbit>`
- Browser support: widely (Chrome 120 · Firefox 121 · Safari 16); elsewhere: without container units or hypot() the lines draw solid and nothing travels; the ring is laid out from count, so it needs no :has()
- Measured cost: 0 B JS (CSS 16.5 kB raw)
- Page: https://moonarc.dev/components/integration-beams/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `hub` | `{ src, alt? }` | none | The product's mark in the middle: an imported image or a URL. The drawing is hidden from screen readers, so alt is only kept on the image. |
| `integrations` | `{ name, logo, href? }[]` | none | The integrations: the first eight on the lines, the rest on the ring (with orbit), every one in the list by name, linked where href is set. logo is an imported image or a URL, drawn square on a round plate. |
| `layout` | `'hub' | 'fan'` | `'hub'` | hub: the integrations around the product; fan: in a column flowing into the product at the inline end. A right-to-left page mirrors the fan, and the logos are mirrored back. |
| `orbit` | `boolean` | `false` | Put the integrations after the eighth (up to twelve more) on a ring around the product. |
| `list` | `'visible' | 'hidden'` | `'visible'` | The list under the drawing: shown as name chips, or for screen readers only (.ma-sr). |
| `listLabel` | `string` | `'Integrations'` | Accessible name of the list. |
| `cycles` | `number` | none | Rounds the packets travel once the drawing is in view (Reveal, the shared script, marks it), setting off in turn, before the lines rest. Unset, they travel while the page is open. One round of eight lines is over in under five seconds, the limit WCAG 2.2.2 sets for motion with no control. |
| `headline` | `string` | none | The section's h2. The headline slot wins over it. |
| `eyebrow` | `string` | none | Small label above the headline. The eyebrow slot wins over it. |
| `copy` | `string` | none | Supporting copy under the headline. The copy slot wins over it. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. The packets are the brand colour, and the tone's text on ink and brand. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding and the gaps ×0.8 / ×1 / ×1.25 through --ma-density. |
| `align` | `'center' | 'start'` | `'center'` | Alignment of the head, the list and the actions; the drawing stays centred. |

## Usage

```astro
---
import IntegrationBeams from '@/components/moonarc/pro/IntegrationBeams.astro';
import mark from '../assets/mark.svg';
import mail from '../assets/integrations/mail.svg';
import pay from '../assets/integrations/pay.svg';
import chat from '../assets/integrations/chat.svg';
---
<IntegrationBeams
  eyebrow="Integrations"
  headline="Works with the tools you already use"
  hub={{ src: mark, alt: 'Your product' }}
  integrations={[
    { name: 'Mail', logo: mail, href: '/integrations/mail/' },
    { name: 'Payments', logo: pay, href: '/integrations/pay/' },
    { name: 'Chat', logo: chat },
  ]}
/>
```

## Reduced motion

The lines are drawn whole at 60 % and the ring stands still.

## With ClientRouter

Inherits AnimatedBeam and OrbitingCircles; nothing to wire, both are CSS only.

## Craft

- Nothing in the drawing takes focus: a link to an integration lives in the list, where a screen reader and the keyboard both reach it.
- The packets set off one after another, spread over one trip, so the lines never pulse together.
- The ring's radius is a share of the drawing's width, so it sits between the product and the lines at any size.

## Replaces

- AnimatedBeam integrations (Magic UI)
- Integrations section (shadcnblocks)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/integration-beams` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: animated-beam, orbiting-circles, reveal.