Animated React card components
Brand bridge
A feature card with big brand tiles wired to a hub by gradient lines in each brand's colours, glowing comets and a particle field that scatters from the pointer. Click a tile to connect it.
Cards, press and hover, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/brand-bridge.tsx https://motion-brew.com/r/brand-bridge.tsxOne self contained file for React and Tailwind CSS: brand-bridge.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { BrandBridge } from "@/components/brand-bridge";
export default function Integrations() {
return (
<BrandBridge
title="All your tools, one hub"
onToggle={(id, on) => (on ? connect(id) : disconnect(id))}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brands | BridgeBrand[] | six brands (DEFAULT_BRANDS) | id, name, colors (the wire gradient), logo; up to eight, half on each side. BRANDS also has YouTube and Apple |
| defaultConnected | string[] | none | Ids wired in at first |
| autoplay | boolean | true | Connects the brands one by one in a random order, then stays connected; pauses on hover, stops once a tile is pressed |
| onToggle | (id, connected) => void | ||
| title | ReactNode | "All your tools, one hub" | The centred heading |
| description | ReactNode | a short line | Under the heading |
| hub | ReactNode | a small mark | Inside the hub |
| particles | number | 48 | Background particles, 0 to 240 |
| speed | number | 1 | Comet speed |
| className | string |
More cards
- Flux card: A feature card on a pixelated, dithered gradient with a negative magnetic field: squares flee the pointer and leave a hole that follows it.
- Aura card: A feature card on a live shader gradient that leans toward the pointer and ripples when pressed.
- Pricing card: A plan card in a soft shell.
- Liquid card: Four status cards with an icon as a glass container: liquid pours in, waves roll and bubbles rise.