proNew152 lines · framer-motion

Integrations Hub

One hub, a ring of connectors, no real logos needed. A full-width feature section with a hub-and-spoke diagram: a central mark and a ring of original, hand-drawn abstract marks around it, connected by lines with a travelling pulse flowing inward on a loop.

Use it for: An integrations, ecosystem or platform page that wants to show breadth of connections without naming or faking real company logos.
Themes: Light + dark
License: Commercial use

Live

Connected

Plugs into what you already run

One hub, a ring of connectors — abstract marks standing in for whatever you plug in.

Orbit

Lattice

Rune

Vector

Mesh

Pivot

Core

tsx

"use client";

import * as React from "react";
import { motion, useInView, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width feature section: a hub-and-spoke diagram with a central mark and a ring
 * of abstract, made-up marks around it, connected by lines with a travelling pulse
 * flowing inward on a loop. All marks are original SVG shapes, not real logos.
 */

export interface SpokeMark {
  id: string;
  label: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Spoke positions are computed from their index around a circle, so any number of spokes (3–8) lays out evenly with no manual coordinates.
→A small pulse travels from each spoke to the centre on an independent loop, staggered by index, fading in and out as it moves; this only runs once the section is in view.
→Each spoke and the hub use original geometric glyphs drawn in inline SVG — no real brand marks or wordmarks.
→speed scales pulse travel speed; accent colours the pulses and the hub's ring.
→prefers-reduced-motion keeps the diagram static with no travelling pulses.

Accessibility

✓Connecting lines and pulses are aria-hidden; each spoke carries a real text label beneath its glyph so meaning doesn't rely on the icon alone.
✓Heading is a real <h2>; the diagram is supplementary to the text above it, not the sole carrier of information.
✓Honours prefers-reduced-motion.