Street Light AI

VibeWave - Collaborative Color Experience

Live From VibeWave

Loading current color...
{{ error }}

{{ currentColor }}

VibeWave ✨

A Collaborative Color Experience for Events

Unite your crowd with color at concerts, sporting events, and live gatherings.

Live at: https://vibewave.live/

What is VibeWave?

VibeWave is a real-time collaborative color experience designed for events where crowds come together. At concerts, sporting events, and live gatherings, everyone shares colors that blend together in real-time, creating a unified collective visual experience that synchronizes the entire crowd.

Key Features

  • 🎨 Real-time Crowd Color Sharing - Everyone at the event contributes to the collective color
  • 🎪 Event-Focused - Designed for concerts, sporting events, and live gatherings
  • ⚡ WebSocket Sync - <50ms latency for instant crowd synchronization
  • 🔄 Smooth Transitions - Meditative 8-second color blends unite the crowd
  • 📊 Live Color Feed - See the last 8 colors from the crowd affecting the collective experience
  • 🎯 Rate Limited - Fair participation (1 color every 12 seconds per person)

Technology Stack

VibeWave is built on Cloudflare’s edge platform for global scale and low latency:

Infrastructure

  • Frontend: Cloudflare Pages (static hosting + Functions)
  • Backend: Cloudflare Workers + Durable Objects
  • Storage: Cloudflare KV (24-hour retention)
  • WebSockets: Durable Objects (real-time sync)

Tech Stack

  • Frontend: Vue.js 3, UnoCSS
  • Backend: Cloudflare Workers (JavaScript)
  • Real-time: WebSockets via Durable Objects
  • Testing: Vitest (58 tests, 77% coverage)

How It Works

Color Transition Flow

  1. User selects color → Transitions to selected color (500ms)
  2. Hold on selected color → User sees their choice (2000ms)
  3. Blend to collective color → Smooth transition unites the crowd (8000ms)

Collective Color Calculation

  • Uses last 8 color submissions from the crowd for averaging
  • Updates in real-time via WebSocket broadcasts
  • 24-hour retention in Cloudflare KV

Rate Limiting

  • Per-user: 1 color every 12 seconds (~5/minute)
  • Global: 1,000 requests/second (Cloudflare Durable Object limit)

Use Cases

Concerts & Music Events

Create a unified visual experience where the entire audience participates in a shared color journey that evolves throughout the performance.

Sporting Events

Unite fans with team colors that blend and shift based on crowd energy and participation.

Live Gatherings

Any event where people come together can benefit from this shared, real-time visual experience.

Architecture

VibeWave leverages Cloudflare’s global edge network to deliver low-latency, real-time experiences:

Frontend (Vue.js)
    ↓
Cloudflare Pages Functions
    ↓
Cloudflare Workers
    ↓
Durable Objects (WebSocket + State)
    ↓
Cloudflare KV (Storage)

Key Components

  • Frontend: Vue.js 3 single-page application with WebSocket client
  • API Endpoints: HTTP endpoints for color submission and retrieval
  • WebSocket Handler: Real-time bidirectional communication
  • Durable Objects: Stateful WebSocket connections and color management
  • KV Storage: Persistent color history with 24-hour retention

Performance

  • Latency: <50ms WebSocket updates
  • Scalability: Global edge deployment
  • Availability: 99.9%+ uptime on Cloudflare’s network
  • Coverage: 77% test coverage with 58 passing tests

Deployment

Production

  • URL: https://vibewave.live/
  • Hosting: Cloudflare Pages
  • Deployment: Automated via GitHub integration
  • CDN: Cloudflare global edge network

Get Started

Visit https://vibewave.live/ to experience VibeWave in action!

No installation required - just open the link on your mobile device or desktop browser and start sharing colors with the crowd.

About

VibeWave is developed by Street Light AI as a demonstration of real-time collaborative experiences built on modern edge computing platforms.

Built with ❤️ using Cloudflare’s edge platform for global performance and reliability.

Contact: jef@streetlight.ai