Quantum Entanglement — Mirrored Particle Animation
The Quantum Entanglement effect is a conceptual physics simulation that demonstrates “spooky action at a distance.” By splitting the screen into two clusters, interactions on one side are instantly reflected on the other using entangled particle pairs.
How It Works
The simulation maintains two arrays of particles. Each “Base” particle (Cluster A) has a “Mirrored” partner (Cluster B). When the mouse interacts with a particle in Cluster A, its velocity and position are updated. The partner particle in Cluster B then instantly inherits these state changes in a mirrored coordinate system. We use a dashed “entanglement link” to visually connect the paired entities.
Use Cases
- Scientific or educational web platforms
- High-concept landing pages for AI or quantum computing
- Experimental interactive landing pages
- Dark-themed creative portfolios
How to Customize
- Link Sensitivity: Adjust the distance threshold (
d < 100) in the JS to change when particles connect to their neighbors. - Particle Count: Modify the
countvariable to create more complex or simpler webs. - Colors: Change the
strokeStylefor Cluster A (cyan) and Cluster B (magenta) to match your brand colors.
Frequently Asked Questions
What happens if I move the mouse to the right side?
The interaction logic is currently bound to specific coordinate logic for Cluster A. You can easily update the mousemove handler to detect which cluster is being hovered and toggle which particle is the “base” and which is the “mirror”.
Does the dash line affect performance?
No. The dashed lines are drawn selectively (i % 8 === 0) to provide a visual hint without cluttering the canvas or increasing the draw calls unnecessarily.
Is it accessible?
Yes. The canvas is a decorative element. We recommend including descriptive alt text or an aria-label on the wrapper container for screen reader users.
