+ {/* Row 1: q-p */}
+
+ );
+};
diff --git a/tools/remotion/components/IPhone17ProFrame.tsx b/tools/remotion/components/IPhone17ProFrame.tsx
new file mode 100644
index 00000000..19f94b3e
--- /dev/null
+++ b/tools/remotion/components/IPhone17ProFrame.tsx
@@ -0,0 +1,171 @@
+import React from 'react';
+import { spring, useCurrentFrame, useVideoConfig } from 'remotion';
+
+/**
+ * Pixel-accurate iPhone 17 Pro frame.
+ *
+ * Dimensions based on iPhone 16 Pro (same form factor):
+ * - Screen: 393×852 CSS points (2622×1206 @3x)
+ * - Corner radius: 55px (device), 50px (screen inner)
+ * - Bezel: ~3.5px (thinnest in any iPhone)
+ * - Dynamic Island: 126×37 pill, centered 13px from top
+ * - Safe area: top 59px, bottom 34px (home indicator)
+ * - Frame: natural titanium (#8a8a8e border)
+ */
+
+type IPhone17ProFrameProps = {
+ children: React.ReactNode;
+ /** Disable the spring entrance animation */
+ noAnimation?: boolean;
+};
+
+// Device dimensions (CSS points)
+const SCREEN_W = 393;
+const SCREEN_H = 852;
+const BEZEL = 4;
+const DEVICE_W = SCREEN_W + BEZEL * 2; // 401
+const DEVICE_H = SCREEN_H + BEZEL * 2; // 860
+const DEVICE_RADIUS = 55;
+const SCREEN_RADIUS = 50;
+
+// Dynamic Island
+const DI_W = 126;
+const DI_H = 37;
+const DI_TOP = 13; // from top of screen
+const DI_RADIUS = DI_H / 2; // pill shape
+
+export { SCREEN_W, SCREEN_H };
+
+export const IPhone17ProFrame: React.FC
+ {ROW_1.map((k) => (
+
+
+ {/* Row 2: a-l */}
+
+ {ROW_2.map((k) => (
+
+
+ {/* Row 3: shift + z-m + delete */}
+
+
+
+ {/* Row 4: 123 / globe / space / return */}
+
+
+
+ {ROW_3.map((k) => (
+
+
+
+
+
+
+ 123
+
+
+
+
+ {/* Space bar */}
+
+ return
+
+
+ {/* Titanium frame (outer body) */}
+
+ );
+};
diff --git a/tools/remotion/components/TerminalScreen.tsx b/tools/remotion/components/TerminalScreen.tsx
new file mode 100644
index 00000000..1ae79cf5
--- /dev/null
+++ b/tools/remotion/components/TerminalScreen.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import { useCurrentFrame } from 'remotion';
+import { colors, fonts } from '../lib/theme';
+
+type OverlayChar = {
+ char: string;
+ confirmed: boolean;
+};
+
+type TerminalScreenProps = {
+ typed: string;
+ cursorVisible: boolean;
+ overlayChars?: OverlayChar[];
+ fontSize?: number;
+};
+
+/**
+ * Renders a terminal area styled exactly like the real Codeman xterm.js terminal.
+ * Background #0d0d0d, Fira Code font, block cursor, Claude Code prompt.
+ */
+export const TerminalScreen: React.FC
+ {/* Side button (right) — power */}
+
+
+ {/* Side buttons (left) — volume up, down, action */}
+
+
+
+
+ {/* Screen */}
+
+
+ {/* Home indicator */}
+
+
+ {/* App content */}
+ {children}
+
+ {/* Dynamic Island (on top of everything) */}
+
+
+
+ {/* Previous terminal output lines (fake history for realism) */}
+
+ );
+};
diff --git a/tools/remotion/compositions/ZerolagDemo.tsx b/tools/remotion/compositions/ZerolagDemo.tsx
new file mode 100644
index 00000000..5a7c4c2c
--- /dev/null
+++ b/tools/remotion/compositions/ZerolagDemo.tsx
@@ -0,0 +1,391 @@
+import React from 'react';
+import {
+ AbsoluteFill,
+ Img,
+ interpolate,
+ Sequence,
+ spring,
+ staticFile,
+ useCurrentFrame,
+ useVideoConfig,
+} from 'remotion';
+import { colors, fonts } from '../lib/theme';
+import { IPhone17ProFrame, SCREEN_W, SCREEN_H } from '../components/IPhone17ProFrame';
+import { IOSKeyboard } from '../components/IOSKeyboard';
+
+// ─── Scene timing (frames @ 30fps) ───
+const TITLE_DUR = 60;
+const PHONES_DUR = 30;
+const TYPING_DUR = 420;
+const HOLD_DUR = 60;
+const OUTRO_DUR = 45;
+
+const TITLE_START = 0;
+const PHONES_START = TITLE_DUR; // 60
+const TYPING_START = PHONES_START + PHONES_DUR; // 90
+const HOLD_START = TYPING_START + TYPING_DUR; // 510
+const OUTRO_START = HOLD_START + HOLD_DUR; // 570
+
+export const ZEROLAG_TOTAL_FRAMES = OUTRO_START + OUTRO_DUR; // 615
+
+// ─── iPhone 17 Pro safe area ───
+const SAFE_AREA_TOP = 59; // Below Dynamic Island
+const PHONE_SCALE = 1.12; // Scale up to fill more of the frame
+
+// The Codeman screenshot starts content at y=0 (the session tab).
+// On a real device it would sit below the safe area, so we offset it.
+const SCREENSHOT_Y_OFFSET = SAFE_AREA_TOP;
+
+// Terminal typing overlay position (relative to screenshot top)
+// Session tab is ~44px, then terminal starts. Adding safe area offset:
+const TERMINAL_TOP = SAFE_AREA_TOP + 52;
+const TERMINAL_LEFT = 14;
+const TERMINAL_FONT = 22; // Large for video readability
+
+// ─── Typing schedule ───
+const TYPED_TEXT = 'fix the auth bug in the login flow';
+const FRAME_GAP = 12; // ~400ms between keystrokes
+
+// Remote connection lag: 600ms-1.2s+ per char (18-36+ frames)
+const LAGGY_DELAYS = [
+ 24, 30, 36, 32, 26, 22, 34, 28, 38, 20, 30, 24, 32, 26, 36, 22,
+ 30, 24, 32, 28, 34, 26, 30, 22, 28, 36, 24, 30, 32, 26, 34, 28, 24, 30,
+];
+
+type KeyEvent = { frame: number; char: string; lagDelay: number };
+
+const TYPING_SCHEDULE: KeyEvent[] = TYPED_TEXT.split('').map((char, i) => ({
+ frame: i * FRAME_GAP,
+ char,
+ lagDelay: LAGGY_DELAYS[i % LAGGY_DELAYS.length],
+}));
+
+const CONFIRM_DELAY = 14;
+
+// ─── iOS Status Bar (sits in the safe area, flanking Dynamic Island) ───
+const IOSStatusBar: React.FC = () => (
+
+
+
+ {/* Active prompt line — this is where the typing happens */}
+
+ ❯
+ claude --dangerously-skip-permissions
+
+
+ ╭────────────────────────────────────╮
+
+
+ │ Claude Code session active │
+
+
+ ╰────────────────────────────────────╯
+
+
+ {/* Prompt character */}
+ ❯
+
+ {/* Typed text */}
+ {overlayChars ? (
+ // Zerolag mode: show overlay chars with confirmed/unconfirmed color
+ overlayChars.map((oc, i) => (
+
+ {oc.char}
+
+ ))
+ ) : (
+ {typed}
+ )}
+
+ {/* Block cursor */}
+
+
+
+ 9:41
+
+);
+
+// ─── Typing overlay ───
+const TypingOverlay: React.FC<{
+ typed: string;
+ overlayChars?: { char: string; confirmed: boolean }[];
+ cursorVisible: boolean;
+}> = ({ typed, overlayChars, cursorVisible }) => {
+ const frame = useCurrentFrame();
+ const cursorOpacity = cursorVisible ? (Math.floor(frame / 18) % 2 === 0 ? 0.85 : 0.5) : 0;
+ const lineH = Math.round(TERMINAL_FONT * 1.4);
+ const charW = TERMINAL_FONT * 0.62;
+
+ return (
+
+ {/* Signal */}
+
+ {/* WiFi */}
+
+ {/* Battery */}
+
+
+
+ {'❯ '}
+ {overlayChars
+ ? overlayChars.map((oc, i) => (
+
+ {oc.char}
+
+ ))
+ : {typed}}
+
+
+ );
+};
+
+// ─── Single phone: iPhone 17 Pro + real screenshot + typing + keyboard ───
+const MobileCodeman: React.FC<{
+ typed: string;
+ overlayChars?: { char: string; confirmed: boolean }[];
+ cursorVisible: boolean;
+ activeKey?: string;
+ pressAge?: number;
+ showKeyboard?: boolean;
+ noAnimation?: boolean;
+}> = ({ typed, overlayChars, cursorVisible, activeKey, pressAge, showKeyboard = true, noAnimation }) => (
+
+ {/* Real Codeman mobile screenshot, pushed down by safe area */}
+ })
+
+ {/* iOS status bar in the safe area */}
+
+
+
+ {/* iOS status bar in the safe area */}
+
+
+ )}
+
+
+);
+
+// ─── Title scene ───
+const TitleScene: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+
+ const titleScale = spring({ frame, fps, config: { damping: 15, stiffness: 80 } });
+ const titleOpacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });
+ const subtitleOpacity = interpolate(frame, [15, 35], [0, 1], { extrapolateRight: 'clamp' });
+
+ return (
+
+
+ {title}
+
+
+ {detail}
+
+
+
+
+ Zerolag Input
+
+
+ Local echo for remote terminal sessions
+
+
+
+ Codeman
+
+ Zero-latency mobile input
+
+
+ npm i xterm-zerolag-input
+
+
+
+
+
+
+
+
+
+
+
+
+
+