Particle Animation
An animated particle system with a diagonal gradient background (-135deg). Particles move in circular equivalence patterns and connect to nearby particles, creating an organic, flowing network effect inspired by the concept of equivalence.
Preview
Watch the particles flow and connect to create an organic network. The animation adapts to your design system colors and theme.
Features
- Animated particle system with smooth movement
- Gradient background using design system color tokens
- Dynamic connections between nearby particles
- Pulsing opacity for visual depth
- Responsive canvas that adapts to container width
- Wraparound edges for continuous movement
Usage
Import and use the ParticleAnimation component:
import ParticleAnimation from "@/components/lattice/ParticleAnimation";
export default function MyComponent() {
return (
<div className="w-full">
<ParticleAnimation />
</div>
);
}Configuration
The animation automatically reads from CSS custom properties:
--primary- Primary color for gradient top-right--tertiary- Tertiary color for gradient bottom-left
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
Gradient Background
The animation uses a linear gradient background at -135 degrees (from top-right to bottom-left). The gradient transitions from primary color (top-right) to tertiary color (bottom-left), matching the original design specification.
Equivalence Pattern
Particles are arranged in a grid pattern and move in circular equivalence patterns around their original positions. Each particle has a unique phase offset, creating a synchronized yet varied movement effect that represents the concept of equivalence.
Dynamic Connections
Particles connect to nearby neighbors within an 80-pixel radius. The connection opacity decreases with distance, creating a subtle network effect that reveals the relationships between particles.
Rendering
The animation is rendered on an HTML5 canvas element. The gradient background is redrawn each frame, followed by particles and their connections, creating smooth motion at 60 FPS.