hugh-codes · Copilot · Mar 26, 2026 · Mar 26, 2026 · Mar 26, 2026 · Mar 26, 2026
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -1 +1,39 @@
 # chat-visual
+
+A browser-based chat and reaction replay tool for live-stream JSONL exports.
+
+## What it does
+
+Upload a `.jsonl` file exported from a Twitter Spaces (or compatible) live stream, optionally add a video file, and replay the chat events as a transparent video overlay:
+
+- **Floating emoji reactions** rise up over the video area in real time, timed to the stream
+- **Transparent chat overlay** shows join events and emoji reactions as bottom-left text — no background panel, just text-shadow for readability, so it looks natural on any video
+- **Video player** — drag-and-drop or click to load any video file (MP4, MOV, MKV, etc.); large files up to 8 GB are streamed from disk via `URL.createObjectURL` without loading into RAM
+- **Export MP4** — offline H.264 encode via WebCodecs; renders the full overlay at maximum CPU speed without replaying the video (typically 10–50× faster than real-time, so a 2-hour stream takes minutes, not hours). Output is a 1920×1080 MP4 with a black background — drop it onto your video track in Premiere, DaVinci Resolve, CapCut, etc. and set the blend mode to **Screen** for clean compositing. Requires Chrome 94+ or Edge 94+.
+- **Playback controls** — play/pause, scrubber, and speed selector (0.5×–4×)
+- **Drag-and-drop** file upload, or click to browse; includes a bundled example file
+
+## JSONL format
+
+Each line must be a JSON object with a top-level `kind` field:
+
+| `kind` | Description |
+|--------|-------------|
+| `1` | Stream event — inner `body.type=2` carries an emoji reaction |
+| `2` | Presence / join event — inner `payload.sender` has user info |
+
+## Getting started
+
+```bash
+npm install
+npm run dev
+```
+
+Then open `http://localhost:5173` and click **Load example file** to try it with the bundled sample data.
+
+## Build
+
+```bash
+npm run build   # outputs to dist/
+```
+
diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>chat-visual</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>