mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-10-08 08:29:42 +02:00
392 lines
13 KiB
TypeScript
392 lines
13 KiB
TypeScript
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>
|
||
);
|
||
};
|