Linked Orbs

Linked Orbs: A Cross-Window, Cross-Device Particle Experience

Overview

This project is an interactive, real-time particle system where users control and influence living orb structures across different windows — and even across different devices (desktop, laptop, phone).

The orbs, made of floating particles, react to window movement, screen position, and proximity to other orbs — even if they exist on separate devices.

When orbs get close, they connect, morph, share particles, and can even merge into new forms, creating an organic and futuristic multi-device living sculpture.

Key Goals

• Create dynamic particle orbs that float and react to their environment.
• Track window position and device movement (mouse dragging, device tilt).
• Enable real-time communication between multiple browser windows and different devices.
• Implement physics-based interaction when orbs get close (attract, connect, merge, morph).
• Create a seamless, hypnotic, cyberorganic visual experience across devices.
• Allow easy pairing between devices (ex: via QR code or session ID).

Main Features

Particle Orbs

Each browser window spawns its own orb, composed of 500–1000 floating particles.

Window Interaction

As a user moves or resizes their window, the orb deforms and shifts dynamically.

Cross-Window Communication

• Same Device: Use BroadcastChannel API to sync orb locations and states.
• Different Devices: Use WebSocket server (Socket.IO) to sync orbs across networked devices.

Orb Merging

When two orbs come within "proximity" on screen (distance calculation), they:

• Connect via visible particle tendrils
• Gradually share particles
• Potentially fuse into one bigger, brighter orb

Phone-Specific Interactions

• Use device motion sensors (accelerometer, gyroscope) to control orb movement.
• Phone can "feed" energy into the desktop orb via proximity or gestures.

Session Linking

• Desktop site generates a unique session ID.
• Phone scans a QR code or enters the ID to join and sync.

Visuals

• Futuristic neon glow effects
• Smooth particle physics (gravity, spring tension)
• Color blending on orb fusion
• Responsive to ambient input (motion, light, interaction)

Technical Implementation

This project is built using vanilla JavaScript with HTML5 Canvas for the visual elements. The BroadcastChannel API enables communication between windows on the same device, while WebSocket connections handle cross-device synchronization.

The particle system uses a custom physics engine that simulates attraction, repulsion, and orbital mechanics to create the fluid, organic movement of the orbs.

Current Status

This is an experimental project in active development. Try the current prototype by clicking "Launch Project"!