Synapse Card
NewPremiumIndividual cards that form a shared nervous system. Multiple SynapseCards on the same page automatically connect to each other with a synchronized heartbeat pulse.
cardssynapseconnectedheartbeatpulsenetwork
Installation
Terminalbash
npx motioncraft add synapse-cardUsage
synapse-card.tsxtsx
import { SynapseCard } from "@/components/cards/living-system";
<div className="grid grid-cols-3 gap-4">
<SynapseCard id="input" title="Input Layer" color="blue" />
<SynapseCard id="process" title="Processing" color="purple" />
<SynapseCard id="output" title="Output" color="emerald" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| id* | string | — | Unique identifier for connection registry |
| title* | string | — | Card title |
| description | string | — | Card description |
| icon | ReactNode | — | Card icon |
| color | string | cyan | Pulse color |
| pulseIntensity | number | 0.5 | Heartbeat strength (0-1) |
| children | ReactNode | — | Additional card content |
| className | string | — | Additional CSS classes |
Related Components
Living System
NewA multi-panel organism that breathes, pulses, and reacts as one living entity. Nodes are connected by flowing particle streams with a shared heartbeat.
Neural Web
NewSelf-organizing neural network background. Nodes autonomously drift, form connections by proximity, pulse together, and recoil from your cursor like a living nervous system.
Bento Grid
Apple-style bento grid layout with configurable spans and gap sizes.
Glow Card
Card with animated glow border that follows cursor position.