Integration Hub — animated beam integration visual

A glowing animated integration visual designed to show what your product connects with, and make your ecosystem feel active, useful, and alive.

Soft beams of light move between satellite icons and a central hub, creating a calm, hypnotic motion that naturally guides attention back to your product. Instead of showing integrations, partners, or connected tools as another static logo grid, you can present them as a dynamic system with your product at the center.

It is perfect for showing tools your product integrates with, but it can also be used for partner networks, workflow diagrams, AI agent ecosystems, product features, platform modules, community members, or any section where one central idea connects to many others.

Choose from Split, Arc, or Circle layouts depending on the story you want to tell. Place icons on both sides, fan them across one direction, or surround the hub completely. Use it as a hero visual, an integration showcase, a “connects to everything” section, or a visual explainer for how your product fits into a larger workflow.

Perfect for

• Integration sections

• “Connect your tools” sections

• AI product landing pages

• SaaS platform hero visuals

• Partner and ecosystem showcases

• Developer platform homepages

• API and workflow explainers

• Feature or module overviews

• AI agent or automation networks

• Community, team, or marketplace visuals

Example use cases

1. Show your product connected to Slack, Notion, Google Drive, HubSpot, Salesforce, Figma, GitHub, or other tools.

2. Present your platform as the central hub in a larger workflow.

3. Visualize AI agents, automations, or features working around one core product.

4. Show partner brands, ecosystem members, or marketplace apps in a more dynamic way.

5. Turn a “how it works” section into a visual system instead of a static diagram.

Customization options

• Everything is editable from the Framer properties panel:

• Hub and satellite icons

• Split, Arc, and Circle layouts

• Beam direction, curvature, colors, and width

• Animation speed and stagger timing

• Optional beam glow and hub halo pulse

• Toggleable static base line

• Node size, background, border, padding, and shadow