✨ Blinkenscreens

Create synchronized drawing-and-light shows across multiple devices in real-time!

Turn any event into an interactive art experience. Everyone draws, everyone gets ready, and when you hit play — all screens light up together in perfect sync. 🎨💡

🎯 What is this?

A Nuxt 4 web app that combines drawing, WebSockets, and synchronized playback to create shared visual experiences at events. Perfect for parties, workshops, or any gathering where you want people to collaborate creatively!

✨ Features

🖼️ For Participants

• Fullscreen canvas with four themed prompts (🤩 joy, 😪 sad, 😞 despair, 🎉 party)
• Wake-lock keeps screens on during the show
• Local storage saves your drawings safely
• Download your artwork anytime

🎛️ For Event Organizers

• Admin console at /admin with token auth
• Live monitoring: see connected devices, latency, and readiness
• Test mode for practice runs
• One-click launch when everyone’s ready

🚀 Under the Hood

• WebSocket sync with automatic latency measurement
• Clock alignment across all devices
• Smart countdowns adapt to slowest connection (3x latency + buffer)
• Schedule-driven playback with flashes, fades, and effects
• Session resumption survives reconnects

🏗️ Tech Stack

• Nuxt 4 + Vue 3
• Nitro WebSocket server
• Canvas API for drawing
• Wake Lock API for always-on screens
• localStorage for persistence
• mkcert for local HTTPS

🚀 Quick Start

Prerequisites: Node 20+, pnpm, mkcert

# Install mkcert (if needed)
# macOS: brew install mkcert
# Linux: See https://github.com/FiloSottile/mkcert#installation

# Clone and setup
pnpm install
pnpm prepare  # Generates SSL certs

# Create .env file
echo "NUXT_ADMIN_TOKEN=changeme" > .env

# Start dev server (HTTPS on localhost:3000)
pnpm dev

🎮 Usage

For Participants

1. Open https://localhost:3000 on your device
2. Draw something for each of the four prompts
3. Hit “Ready” when you’re done
4. Watch the magic happen when admin starts the show! ✨

For Admins

1. Open https://localhost:3000/admin
2. Enter your admin token
3. Monitor connected devices and their readiness
4. Test countdown or Start Playback
5. Watch the synchronized show across all devices 🎆

📦 Scripts

pnpm dev         # Dev server with HTTPS
pnpm build       # Build for production
pnpm preview     # Preview production build
pnpm start:node  # Run production server (requires env vars)

🎨 Customizing the Show

Edit server/data/schedule.json to customize timing and effects:

{
  "totalMs": 220000,
  "events": [
    { "label": "up", "time_ms": 12822 },
    { "label": "drop", "time_ms": 51234 }
  ]
}

Effect labels:

• up / down / ground — Show themed images with fades
• life / buildup — Repeating flashes
• drop — Party mode with colorful flashes
• silence / end — Dimming effects

📁 Project Structure

app/
  ├── pages/
  │   ├── index.vue      # 🎨 Participant view
  │   └── admin.vue      # 🎛️ Admin console
  ├── composables/
  │   ├── usePlaybackSocket.ts      # WebSocket connection
  │   ├── usePlaybackScheduler.ts   # Timeline engine
  │   ├── useDrawingCanvas.ts       # Canvas drawing
  │   └── useCountdownSync.ts       # Countdown overlay
  └── components/         # UI components

server/
  ├── routes/
  │   └── playback.ts    # WebSocket handler
  ├── api/
  │   └── schedule.get.ts
  └── data/
      └── schedule.json  # Playback timeline

types/
  ├── topics.ts          # Drawing prompts
  └── websocket.ts       # Message schemas

🔧 Configuration

Set these environment variables:

# Required
NUXT_ADMIN_TOKEN=your-secret-token

# Production (optional)
HOST=0.0.0.0
NITRO_SSL_CERT=/path/to/ssl.crt
NITRO_SSL_KEY=/path/to/ssl.key

🐛 Troubleshooting

Admin auth fails?
→ Check NUXT_ADMIN_TOKEN is set in your environment

HTTPS certificate errors?
→ Run mkcert -install and then pnpm prepare

Wake lock not working?
→ Requires HTTPS. Make sure you’re using https:// in the URL.