Skip to content

Conversation

@iamKaviB
Copy link
Contributor

☀️ Connected Sun – Multi-Tab Lightning Network

Connected Sun is a fun, interactive visualization that links multiple open browser tabs in real time using the BroadcastChannel API. Each tab displays a glowing, draggable sun that connects to other tabs with animated lightning bolts — creating a dynamic “energy network” across your windows.


🌟 Features

  • Real-time cross-tab connection using BroadcastChannel
  • 🖱️ Drag-and-drop movement of your sun in each tab
  • 🔥 Animated lightning effects connecting tabs
  • 🌍 Multi-tab synchronization — open multiple tabs to see the network grow
  • 📱 Touch support for mobile devices
  • 💫 Smooth canvas animations with particle glow and motion

🧠 How It Works

Each browser tab:

  1. Creates a unique Tab ID.
  2. Broadcasts its sun’s position and window location through a shared BroadcastChannel.
  3. Listens for updates from other tabs and draws lightning connections to their suns.
  4. Automatically removes disconnected tabs and keeps the network updated in real-time.

🧩 All data stays within your browser — no server or backend is needed.


🧰 Technologies Used

  • HTML5 Canvas – for rendering glowing sun and lightning effects
  • Vanilla JavaScript (ES6) – for animation, physics, and inter-tab communication
  • BroadcastChannel API – for real-time multi-tab messaging
  • CSS3 – for responsive design and info overlay styling

🚀 How to Run

  1. Clone or download this repository:
    git clone https://github.com/yourusername/Hacktoberfest2025.git
    cd Hacktoberfest2025/connecting sun

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant