5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:Taa3,

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

Show your product connected to Slack, Notion, Google Drive, HubSpot, Salesforce, Figma, GitHub, or other tools.
Present your platform as the central hub in a larger workflow.
Visualize AI agents, automations, or features working around one core product.
Show partner brands, ecosystem members, or marketplace apps in a more dynamic way.
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

59:[["$","$L5c",null,{"post":{"id":"019dd351-643d-7f17-ac2a-cf6f8b796a59","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"61917cca-a9de-4054-be5d-55cdb75f9478","name":"Lucian Modiga","slug":"lucian-modiga","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/90801/avatar-gdSsfalqfz7BJBcEdtiMyy1IqObdEV.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"CqGCM8CfxCaMKdROeYyo","resolved":true,"title":"Integration Hub","body":"$5d","bodyJson":null,"introduction":"animated beam integration visual","slug":"integration-hub","author":{"framerUserId":"61917cca-a9de-4054-be5d-55cdb75f9478","name":"Lucian Modiga","slug":"lucian-modiga","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/90801/avatar-gdSsfalqfz7BJBcEdtiMyy1IqObdEV.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/CqGCM8CfxCaMKdROeYyo/integration-hub-Xgnjgoqygb0gFcLghIyP8Pr38D9U4P","metadata":{"tint":"hsl(0 0% 57%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-04-24T12:44:07.311Z","updatedAt":"2026-05-07T14:28:32.354Z","publishedAt":"2026-04-28T09:00:19.901Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://framercreator.framer.website/animated_beam_network","price":"10","paymentUrl":"https://contra.com/products/NTN6Rwl2-integration-hub-animated-beam-integration-visual","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"7H55MOAjTHfuLfYU7HoH"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-28T09:00:19.901Z","updatedAt":"2026-04-28T09:00:19.901Z","reported":false}}],"$L5e"]

Suggested for you