Empire Cloud
One connected operating layer
Integration Beam Network
A free React integration section with accessible hub-and-spoke relationships and animated data beams.
Connected by design
Every tool, moving as one system
Bring product, customer and delivery signals into one dependable workspace. Each connection stays visible, understandable and ready to act on.
Explore every integration- StripePayments and subscription eventsStripe connects to Empire Cloud.
- SlackTeam alerts and approvalsSlack connects to Empire Cloud.
- GitHubCommits, checks and releasesGitHub connects to Empire Cloud.
- LinearIssues and delivery progressLinear connects to Empire Cloud.
NotionKnowledge and project context Notion connects to Empire Cloud.SegmentTrusted customer data Segment connects to Empire Cloud.
Customise
0.36
2.4s
56px
Code
<IntegrationBeamNetwork
title="Every tool, moving as one system"
description="Bring product, customer and delivery signals into one dependable workspace."
cta={{ label: "Explore every integration", href: "/components" }}
hub={{
label: "Empire Cloud",
description: "One connected operating layer",
}}
items={[
{
id: "stripe",
label: "Stripe",
description: "Payments and subscription events",
href: "/integrations/stripe",
},
{
id: "slack",
label: "Slack",
description: "Team alerts and approvals",
href: "/integrations/slack",
},
{
id: "github",
label: "GitHub",
description: "Commits, checks and releases",
},
{
id: "linear",
label: "Linear",
description: "Issues and delivery progress",
},
]}
/>Integration Beam Network is a free React integration section for Next.js, built with GSAP and styled with Tailwind. It places a product hub at the centre of four to eight integration cards, joins every relationship with a settled SVG path and sends short data packets along those paths in an outbound, inbound or alternating direction.
The heading, call to action, hub and integrations are ordinary static HTML, while the SVG is decorative and hidden from assistive technology. One scoped GSAP timeline animates stroke dash offsets and gives the destination a restrained acknowledgement. It pauses while fully offscreen or while the tab is hidden, and reduced motion creates no travelling packets or node scaling at all.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/integration-beam-networkUsage
import { IntegrationBeamNetwork } from "@/components/integration-beam-network";
const integrations = [
{
id: "stripe",
label: "Stripe",
description: "Payments and subscription events",
href: "/integrations/stripe",
},
{
id: "slack",
label: "Slack",
description: "Team alerts and approvals",
href: "/integrations/slack",
},
{
id: "github",
label: "GitHub",
description: "Commits, checks and releases",
},
{
id: "linear",
label: "Linear",
description: "Issues and delivery progress",
},
];
export default function Page() {
return (
<IntegrationBeamNetwork
title="Every tool, moving as one system"
description="Bring product, customer and delivery signals together."
hub={{ label: "Empire Cloud", description: "One operating layer" }}
items={integrations}
direction="alternating"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Connected by design" | Introductory label rendered above the section heading. |
| title | string | required | Section heading, rendered as the single h2. |
| description | string | undefined | Optional supporting copy below the heading. |
| cta | { label: string; href: string } | undefined | Optional call to action rendered as a real anchor. |
| hub | { label: string; description?: string } | required | Central product node and its optional supporting copy. |
| items | { id: string; label: string; description: string; href?: string }[] | required | Four to eight integrations. Stable IDs own the React keys and connector relationships. |
| layout | "radial" | "split" | "radial" | Desktop network geometry. Both variants become a readable vertical network below 48rem. |
| direction | "outbound" | "inbound" | "alternating" | "outbound" | Direction travelled by the data packets. |
| pathCurvature | number | 0.36 | Connector bend, clamped from 0.1 through 0.8. |
| beamDuration | number | 2.4 | Seconds each packet takes to travel a connector, clamped from 1.2 through 8. |
| nodeSize | number | 56 | Integration mark diameter in CSS pixels, clamped from 40 through 88. |
| className | string | undefined | Additional classes merged onto the section root. |
Customisation
Integration Beam Network exposes two Tier 3 colour tokens. --integration-network-line controls the settled relationship paths and defaults to --border. --integration-network-beam controls the travelling packet and falls back through the brand colour to --primary. Geometry and timing belong to the typed props in the playground, while content stays in your items and hub data:
:root {
--integration-network-line: var(--border);
--integration-network-beam: var(--color-brand-400, var(--primary));
}Frequently asked questions
- Is Integration Beam Network free for commercial use?
- Yes. Integration Beam Network is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is the integration network accessible without animation?
- Yes. The section has one labelled h2, every integration is part of a semantic list, linked nodes are real anchors and each relationship is described in text. The SVG is decorative. With JavaScript disabled or reduced motion enabled, all content and settled connector paths remain visible.
- How do I change the network layout and beam effect?
- Choose radial or split with layout, set packet direction with direction, and tune pathCurvature, beamDuration and nodeSize within their documented bounds. These effect props never alter your copy, URLs or integration data.