Living System

NewPremium

A multi-panel organism that breathes, pulses, and reacts as one living entity. Nodes are connected by flowing particle streams with a shared heartbeat.

cardslivingorganismparticlesconnectionsheartbeatinteractive

Installation

Terminalbash

npx motioncraft add living-system

Usage

living-system.tsxtsx

import { LivingSystem } from "@/components/cards/living-system";

<LivingSystem
  title="Neural Network"
  color="cyan"
  heartbeatInterval={2500}
  nodes={[
    { id: "brain", title: "Brain", position: [50, 30] },
    { id: "data", title: "Data Lake", position: [25, 70] },
    { id: "api", title: "API Layer", position: [75, 70] },
  ]}
  connections={[
    { from: "brain", to: "data", particles: 4, speed: 2 },
    { from: "brain", to: "api", particles: 3, speed: 3 },
    { from: "data", to: "api", particles: 2, speed: 1 },
  ]}
/>

Props

Prop	Type	Default	Description
nodes*	SystemNode[]	—	Array of nodes with id, title, position [x%, y%]
connections*	SystemConnection[]	—	Array of connections between node IDs
heartbeatInterval	number	3000	Heartbeat interval in ms
color	string	cyan	System color theme
breathe	number	0.5	Breathing intensity (0-1)
title	string	—	System title label
className	string	—	Additional CSS classes

Related Components

Synapse Card

New

Individual cards that form a shared nervous system. Multiple SynapseCards on the same page automatically connect to each other with a synchronized heartbeat pulse.

Bento Grid

Apple-style bento grid layout with configurable spans and gap sizes.

Glow Card

Card with animated glow border that follows cursor position.

Hover Card

Card with smooth 3D tilt and scale on hover with spring physics.