Animated React card components
Integration hub
App tiles wired into one hub, with packets of dots flowing in along every wire. Hover a tile or a wire to light it up and speed its packets.
Cards, hover, Motion
Install
npm i clsx lucide-react motion tailwind-merge && curl -o components/integration-hub.tsx https://motion-brew.com/r/integration-hub.tsxOne self contained file for React and Tailwind CSS: integration-hub.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { IntegrationHub } from "@/components/integration-hub";
import { Calendar, Mail, MessageSquare } from "lucide-react";
const apps = [
{ label: "Mail", icon: Mail },
{ label: "Calendar", icon: Calendar },
{ label: "Chat", icon: MessageSquare },
{ label: "Billing", icon: <img src="/logos/billing.svg" alt="" className="size-6" /> },
];
export default function Page() {
return <IntegrationHub apps={apps} label="Acme workspace" />;
}Props
| Prop | Type | Default | Description | |
|---|---|---|---|---|
| apps | { label; icon: LucideIcon \ | ReactNode }[] | fourteen apps | Tiles around the ring, clockwise from the top |
| hub | ReactNode | an orbit mark | What sits in the hub, like your logo | |
| label | string | "Your workspace" | Name of the hub for screen readers | |
| speed | number | 1 | Packet speed | |
| trail | number | 1 | Dots in each packet, head included | |
| className | string | Placement |
More cards
- Pixel feature card: A phone in front of dithered pixel clouds that drift, shimmer and light up under the cursor.
- Column card: A tall card whose columns grow up from the floor while their values count up inside.
- Score card: A score card whose bars slide in and whose number counts up.
- Metal card stack: A stack of brushed metal payment cards that look like the real thing.