chore: version packages

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

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 = () => (
+  <div
+    style={{
+      position: 'absolute',
+      top: 17,
+      left: 0,
+      right: 0,
+      height: 20,
+      display: 'flex',
+      justifyContent: 'space-between',
+      padding: '0 30px',
+      fontSize: 15,
+      fontFamily: fonts.ui,
+      fontWeight: 600,
+      color: '#fff',
+      zIndex: 40,
+    }}
+  >
+    <span>9:41</span>
+    <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+      {/* Signal */}
+      <svg width="17" height="12" viewBox="0 0 17 12">
+        <rect x="0" y="8" width="3" height="4" rx="0.5" fill="#fff" />
+        <rect x="4.5" y="5" width="3" height="7" rx="0.5" fill="#fff" />
+        <rect x="9" y="2" width="3" height="10" rx="0.5" fill="#fff" />
+        <rect x="13.5" y="0" width="3" height="12" rx="0.5" fill="#fff" />
+      </svg>
+      {/* WiFi */}
+      <svg width="16" height="12" viewBox="0 0 16 12">
+        <path d="M4.5 8.5C5.5 7.2 6.7 6.5 8 6.5s2.5.7 3.5 2" stroke="#fff" strokeWidth="1.5" fill="none" strokeLinecap="round" />
+        <path d="M1.5 5.5C3.5 3 5.7 1.5 8 1.5s4.5 1.5 6.5 4" stroke="#fff" strokeWidth="1.5" fill="none" strokeLinecap="round" />
+        <circle cx="8" cy="11" r="1.5" fill="#fff" />
+      </svg>
+      {/* Battery */}
+      <svg width="27" height="12" viewBox="0 0 27 12">
+        <rect x="0" y="0.5" width="23" height="11" rx="2" stroke="#fff" strokeWidth="1" fill="none" />
+        <rect x="24" y="3.5" width="2.5" height="5" rx="1" fill="#fff" opacity="0.4" />
+        <rect x="1.5" y="2" width="20" height="8" rx="1" fill="#32d74b" />
+      </svg>
+    </div>
+  </div>
+);
+
+// ─── 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 (
+    <div
+      style={{
+        position: 'absolute',
+        top: TERMINAL_TOP,
+        left: TERMINAL_LEFT,
+        right: TERMINAL_LEFT,
+        fontFamily: '"Fira Code", "Cascadia Code", "JetBrains Mono", "SF Mono", Monaco, monospace',
+        fontSize: TERMINAL_FONT,
+        lineHeight: `${lineH}px`,
+        zIndex: 10,
+      }}
+    >
+      <span style={{ color: '#339af0', fontWeight: 700 }}>{'❯ '}</span>
+      {overlayChars
+        ? overlayChars.map((oc, i) => (
+            <span key={i} style={{ color: oc.confirmed ? '#e0e0e0' : '#666' }}>
+              {oc.char}
+            </span>
+          ))
+        : <span style={{ color: '#e0e0e0' }}>{typed}</span>}
+      <span
+        style={{
+          display: 'inline-block',
+          width: charW,
+          height: lineH * 0.82,
+          background: `rgba(224, 224, 224, ${cursorOpacity})`,
+          verticalAlign: 'text-bottom',
+          marginLeft: 1,
+        }}
+      />
+    </div>
+  );
+};
+
+// ─── 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 }) => (
+  <IPhone17ProFrame noAnimation={noAnimation}>
+    <div style={{ width: SCREEN_W, height: SCREEN_H, position: 'relative', overflow: 'hidden', background: '#000' }}>
+      {/* Real Codeman mobile screenshot, pushed down by safe area */}
+      <Img
+        src={staticFile('mobile-claude.png')}
+        style={{
+          width: SCREEN_W,
+          height: SCREEN_H - SCREENSHOT_Y_OFFSET,
+          objectFit: 'cover',
+          objectPosition: 'top',
+          position: 'absolute',
+          top: SCREENSHOT_Y_OFFSET,
+          left: 0,
+        }}
+      />
+
+      {/* iOS status bar in the safe area */}
+      <IOSStatusBar />
+
+      {/* Typing animation */}
+      <TypingOverlay typed={typed} overlayChars={overlayChars} cursorVisible={cursorVisible} />
+
+      {/* iOS keyboard at bottom */}
+      {showKeyboard && (
+        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 20 }}>
+          <IOSKeyboard activeKey={activeKey} pressAge={pressAge} />
+        </div>
+      )}
+    </div>
+  </IPhone17ProFrame>
+);
+
+// ─── Label beneath phone ───
+const PhoneLabel: React.FC<{
+  title: string;
+  detail: string;
+  dotColor: string;
+  detailColor: string;
+}> = ({ title, detail, dotColor, detailColor }) => (
+  <div style={{ textAlign: 'center', marginTop: 20 }}>
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 10,
+        fontSize: 24,
+        fontWeight: 600,
+        fontFamily: fonts.ui,
+        color: '#fff',
+      }}
+    >
+      <div
+        style={{
+          width: 12,
+          height: 12,
+          borderRadius: '50%',
+          background: dotColor,
+          boxShadow: `0 0 12px ${dotColor}`,
+        }}
+      />
+      {title}
+    </div>
+    <div style={{ fontSize: 16, fontFamily: fonts.mono, color: detailColor, marginTop: 6, opacity: 0.9 }}>
+      {detail}
+    </div>
+  </div>
+);
+
+// ─── 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 (
+    <AbsoluteFill style={{ background: colors.bg.dark, justifyContent: 'center', alignItems: 'center' }}>
+      <div style={{ textAlign: 'center', transform: `scale(${titleScale})` }}>
+        <div
+          style={{
+            fontSize: 80,
+            fontWeight: 700,
+            fontFamily: fonts.ui,
+            color: '#fff',
+            opacity: titleOpacity,
+            letterSpacing: -1.5,
+          }}
+        >
+          Zerolag Input
+        </div>
+        <div
+          style={{
+            fontSize: 30,
+            fontFamily: fonts.ui,
+            color: colors.text.dim,
+            opacity: subtitleOpacity,
+            marginTop: 16,
+          }}
+        >
+          Local echo for remote terminal sessions
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ─── Outro ───
+const OutroScene: React.FC = () => {
+  const frame = useCurrentFrame();
+  const opacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });
+
+  return (
+    <AbsoluteFill style={{ background: colors.bg.dark, justifyContent: 'center', alignItems: 'center', opacity }}>
+      <div style={{ textAlign: 'center' }}>
+        <div style={{ fontSize: 56, fontWeight: 700, fontFamily: fonts.ui, color: '#fff' }}>Codeman</div>
+        <div style={{ fontSize: 26, fontFamily: fonts.ui, color: colors.accent.green, marginTop: 10 }}>
+          Zero-latency mobile input
+        </div>
+        <div style={{ fontSize: 16, fontFamily: fonts.mono, color: colors.text.muted, marginTop: 20 }}>
+          npm i xterm-zerolag-input
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ─── Typing demo scene ───
+const TypingDemo: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  const laggyChars = TYPING_SCHEDULE.filter((ev) => frame >= ev.frame + ev.lagDelay).map((ev) => ev.char);
+  const laggyTyped = laggyChars.join('');
+
+  const zerolagOverlay = TYPING_SCHEDULE.filter((ev) => frame >= ev.frame).map((ev) => ({
+    char: ev.char,
+    confirmed: frame >= ev.frame + CONFIRM_DELAY,
+  }));
+
+  let activeKey: string | undefined;
+  let pressAge = 99;
+  for (let i = TYPING_SCHEDULE.length - 1; i >= 0; i--) {
+    const ev = TYPING_SCHEDULE[i];
+    if (frame >= ev.frame && frame < ev.frame + 5) {
+      activeKey = ev.char;
+      pressAge = frame - ev.frame;
+      break;
+    }
+  }
+
+  return (
+    <AbsoluteFill style={{ background: colors.bg.dark, justifyContent: 'center', alignItems: 'center' }}>
+      <div
+        style={{
+          display: 'flex',
+          gap: 50,
+          alignItems: 'flex-start',
+          transform: `scale(${PHONE_SCALE})`,
+          transformOrigin: 'center center',
+        }}
+      >
+        <div>
+          <MobileCodeman typed={laggyTyped} cursorVisible activeKey={activeKey} pressAge={pressAge} noAnimation />
+          <PhoneLabel title="Without Zerolag" detail="600ms–1.2s delay" dotColor={colors.accent.red} detailColor={colors.accent.red} />
+        </div>
+        <div>
+          <MobileCodeman typed="" overlayChars={zerolagOverlay} cursorVisible activeKey={activeKey} pressAge={pressAge} noAnimation />
+          <PhoneLabel title="With Zerolag" detail="0ms delay" dotColor={colors.accent.green} detailColor={colors.accent.green} />
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ─── Phones entrance ───
+const PanelsEntrance: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const scale = spring({ frame, fps, config: { damping: 15, stiffness: 80 } });
+  const opacity = interpolate(frame, [0, 10], [0, 1], { extrapolateRight: 'clamp' });
+
+  return (
+    <AbsoluteFill
+      style={{
+        background: colors.bg.dark,
+        justifyContent: 'center',
+        alignItems: 'center',
+        opacity,
+        transform: `scale(${scale * PHONE_SCALE})`,
+      }}
+    >
+      <div style={{ display: 'flex', gap: 50, alignItems: 'flex-start' }}>
+        <div>
+          <MobileCodeman typed="" cursorVisible noAnimation />
+          <PhoneLabel title="Without Zerolag" detail="600ms–1.2s delay" dotColor={colors.accent.red} detailColor={colors.accent.red} />
+        </div>
+        <div>
+          <MobileCodeman typed="" cursorVisible noAnimation />
+          <PhoneLabel title="With Zerolag" detail="0ms delay" dotColor={colors.accent.green} detailColor={colors.accent.green} />
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+// ─── Main composition ───
+export const ZerolagDemo: React.FC = () => {
+  return (
+    <AbsoluteFill style={{ background: colors.bg.dark }}>
+      <Sequence from={TITLE_START} durationInFrames={TITLE_DUR}>
+        <TitleScene />
+      </Sequence>
+      <Sequence from={PHONES_START} durationInFrames={PHONES_DUR} premountFor={5}>
+        <PanelsEntrance />
+      </Sequence>
+      <Sequence from={TYPING_START} durationInFrames={TYPING_DUR + HOLD_DUR} premountFor={5}>
+        <TypingDemo />
+      </Sequence>
+      <Sequence from={OUTRO_START} durationInFrames={OUTRO_DUR} premountFor={5}>
+        <OutroScene />
+      </Sequence>
+    </AbsoluteFill>
+  );
+};