Cloth Lattice Animation
An interactive 2D force-directed graph animation built with D3.js that creates a cloth-like lattice structure. Nodes can be dragged to interact with the physics simulation.
Preview
Click and drag nodes to interact with the cloth lattice. The animation adapts to your design system colors and theme.
Features
- Interactive drag-and-drop physics simulation
- Uses design system color tokens for dynamic theming
- Responsive canvas that adapts to container width
- Force-directed graph layout with charge and link forces
- Touch and mouse support for interaction
- Automatic cleanup on unmount
Usage
Import and use the ClothLatticeAnimation component:
import ClothLatticeAnimation from "@/components/lattice/ClothLatticeAnimation";
export default function MyComponent() {
return (
<div className="w-full">
<ClothLatticeAnimation />
</div>
);
}Configuration
The animation automatically reads from CSS custom properties:
--primary- Primary color for node fill--on-surface- Color for node stroke--on-surface-variant- Color for links between nodes
The animation height is fixed at 480px, and the width adapts to the container. The component handles theme changes automatically and includes proper cleanup on unmount.
Implementation Details
Force Simulation
The animation uses D3.js force simulation with two main forces: charge force (repulsion between nodes) and link force (attraction between connected nodes). The simulation runs continuously, creating smooth, organic motion.
Grid Structure
The lattice consists of a 20×20 grid of nodes connected horizontally and vertically, creating a cloth-like mesh structure. Each node is connected to its neighbors above and to the left (if they exist).
Interaction
Users can click and drag nodes to interact with the simulation. When dragging, the target node is fixed to the cursor position, and the simulation restarts with increased alpha to respond to the interaction. On release, the node returns to physics-based movement.
Rendering
The animation is rendered on an HTML5 canvas element, providing smooth performance even with many nodes and links. The canvas is cleared and redrawn on each simulation tick.