mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-10-07 16:09:43 +02:00
add project setup
This commit is contained in:
Noah Waldner
@@ -0,0 +1,485 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
AbsoluteFill,
|
||||
Img,
|
||||
interpolate,
|
||||
Sequence,
|
||||
spring,
|
||||
staticFile,
|
||||
useCurrentFrame,
|
||||
useVideoConfig,
|
||||
} from 'remotion';
|
||||
import { colors } from '../lib/theme';
|
||||
import { TitleCard } from '../components/TitleCard';
|
||||
import { PhoneFrame } from '../components/PhoneFrame';
|
||||
import { ClickCursor } from '../components/ClickCursor';
|
||||
|
||||
// ─── Scene timing (frames @ 30fps) ───
|
||||
const TITLE_START = 0;
|
||||
const TITLE_DUR = 45;
|
||||
|
||||
const DESKTOP_START = 45;
|
||||
const WELCOME_DUR = 75; // 2.5s — show welcome screen
|
||||
const CLAUDE_DUR = 90; // 3s — single Claude tab
|
||||
const BOTH_OPENCODE_DUR = 90; // 3s — both tabs, OpenCode active
|
||||
const TAB_SWITCH_DUR = 120; // 4s — tab switching animation
|
||||
const DESKTOP_DUR = WELCOME_DUR + CLAUDE_DUR + BOTH_OPENCODE_DUR + TAB_SWITCH_DUR; // 375
|
||||
|
||||
const TRANSITION_START = DESKTOP_START + DESKTOP_DUR; // 420
|
||||
const TRANSITION_DUR = 60;
|
||||
|
||||
const MOBILE_START = TRANSITION_START + TRANSITION_DUR; // 480
|
||||
const MOBILE_DUR = 240;
|
||||
|
||||
const OUTRO_START = MOBILE_START + MOBILE_DUR; // 720
|
||||
const OUTRO_DUR = 75;
|
||||
|
||||
export const TOTAL_FRAMES = OUTRO_START + OUTRO_DUR; // 795
|
||||
|
||||
// ─── Screenshot paths ───
|
||||
const SCREENSHOTS = {
|
||||
desktopWelcome: staticFile('desktop-welcome.png'),
|
||||
desktopClaude: staticFile('desktop-claude.png'),
|
||||
desktopBothClaude: staticFile('desktop-both-claude.png'),
|
||||
desktopBothOpencode: staticFile('desktop-both-opencode.png'),
|
||||
mobileClaude: staticFile('mobile-claude.png'),
|
||||
mobileOpencode: staticFile('mobile-opencode.png'),
|
||||
};
|
||||
|
||||
// ─── Desktop scene ───
|
||||
const DesktopDemo: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
|
||||
// Key frames within the desktop scene (local frames)
|
||||
const claudeClickFrame = WELCOME_DUR - 15; // cursor clicks near end of welcome
|
||||
const claudeStart = WELCOME_DUR;
|
||||
|
||||
const bothStart = WELCOME_DUR + CLAUDE_DUR; // both tabs appear
|
||||
const switchBase = bothStart + BOTH_OPENCODE_DUR;
|
||||
const switch1Frame = switchBase + 30; // switch to Claude
|
||||
const switch2Frame = switchBase + 75; // switch back to OpenCode
|
||||
|
||||
// Determine which screenshot to show and cross-fade
|
||||
// Phase 1: Welcome (0 → WELCOME_DUR)
|
||||
// Phase 2: Claude single tab (WELCOME_DUR → bothStart)
|
||||
// Phase 3: Both tabs, OpenCode active (bothStart → switchBase)
|
||||
// Phase 4: Tab switching — OpenCode→Claude→OpenCode (switchBase → end)
|
||||
|
||||
// Cross-fade durations
|
||||
const FADE = 10;
|
||||
|
||||
// Welcome → Claude cross-fade
|
||||
const welcomeOpacity =
|
||||
frame < claudeStart - FADE
|
||||
? 1
|
||||
: frame < claudeStart
|
||||
? interpolate(frame, [claudeStart - FADE, claudeStart], [1, 0], {
|
||||
extrapolateRight: 'clamp',
|
||||
})
|
||||
: 0;
|
||||
|
||||
const claudeSoloOpacity =
|
||||
frame < claudeStart
|
||||
? 0
|
||||
: frame < claudeStart + FADE
|
||||
? interpolate(frame, [claudeStart, claudeStart + FADE], [0, 1], {
|
||||
extrapolateRight: 'clamp',
|
||||
})
|
||||
: frame < bothStart - FADE
|
||||
? 1
|
||||
: frame < bothStart
|
||||
? interpolate(frame, [bothStart - FADE, bothStart], [1, 0], {
|
||||
extrapolateRight: 'clamp',
|
||||
})
|
||||
: 0;
|
||||
|
||||
// Both tabs — determine which one is active
|
||||
let bothOpenCodeOpacity = 0;
|
||||
let bothClaudeOpacity = 0;
|
||||
|
||||
if (frame >= bothStart) {
|
||||
// Fade in both-opencode initially
|
||||
if (frame < bothStart + FADE) {
|
||||
bothOpenCodeOpacity = interpolate(
|
||||
frame,
|
||||
[bothStart, bothStart + FADE],
|
||||
[0, 1],
|
||||
{ extrapolateRight: 'clamp' },
|
||||
);
|
||||
} else if (frame < switch1Frame) {
|
||||
// Showing OpenCode
|
||||
bothOpenCodeOpacity = 1;
|
||||
bothClaudeOpacity = 0;
|
||||
} else if (frame < switch1Frame + FADE) {
|
||||
// Cross-fade OpenCode → Claude
|
||||
const t = interpolate(
|
||||
frame,
|
||||
[switch1Frame, switch1Frame + FADE],
|
||||
[0, 1],
|
||||
{ extrapolateRight: 'clamp' },
|
||||
);
|
||||
bothOpenCodeOpacity = 1 - t;
|
||||
bothClaudeOpacity = t;
|
||||
} else if (frame < switch2Frame) {
|
||||
// Showing Claude
|
||||
bothOpenCodeOpacity = 0;
|
||||
bothClaudeOpacity = 1;
|
||||
} else if (frame < switch2Frame + FADE) {
|
||||
// Cross-fade Claude → OpenCode
|
||||
const t = interpolate(
|
||||
frame,
|
||||
[switch2Frame, switch2Frame + FADE],
|
||||
[0, 1],
|
||||
{ extrapolateRight: 'clamp' },
|
||||
);
|
||||
bothOpenCodeOpacity = t;
|
||||
bothClaudeOpacity = 1 - t;
|
||||
} else {
|
||||
// Back to OpenCode
|
||||
bothOpenCodeOpacity = 1;
|
||||
bothClaudeOpacity = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Welcome button positions for cursor (measured from actual screenshot)
|
||||
const welcomeBtnClaudeX = 651;
|
||||
const welcomeBtnClaudeY = 434;
|
||||
const welcomeBtnOpenCodeX = 803;
|
||||
const welcomeBtnOpenCodeY = 434;
|
||||
|
||||
return (
|
||||
<AbsoluteFill style={{ background: colors.bg.dark }}>
|
||||
{/* Welcome screenshot */}
|
||||
{welcomeOpacity > 0 && (
|
||||
<AbsoluteFill style={{ opacity: welcomeOpacity }}>
|
||||
<Img
|
||||
src={SCREENSHOTS.desktopWelcome}
|
||||
style={{ width: 1920, height: 1080 }}
|
||||
/>
|
||||
</AbsoluteFill>
|
||||
)}
|
||||
|
||||
{/* Single Claude tab screenshot */}
|
||||
{claudeSoloOpacity > 0 && (
|
||||
<AbsoluteFill style={{ opacity: claudeSoloOpacity }}>
|
||||
<Img
|
||||
src={SCREENSHOTS.desktopClaude}
|
||||
style={{ width: 1920, height: 1080 }}
|
||||
/>
|
||||
</AbsoluteFill>
|
||||
)}
|
||||
|
||||
{/* Both tabs — OpenCode active */}
|
||||
{bothOpenCodeOpacity > 0 && (
|
||||
<AbsoluteFill style={{ opacity: bothOpenCodeOpacity }}>
|
||||
<Img
|
||||
src={SCREENSHOTS.desktopBothOpencode}
|
||||
style={{ width: 1920, height: 1080 }}
|
||||
/>
|
||||
</AbsoluteFill>
|
||||
)}
|
||||
|
||||
{/* Both tabs — Claude active */}
|
||||
{bothClaudeOpacity > 0 && (
|
||||
<AbsoluteFill style={{ opacity: bothClaudeOpacity }}>
|
||||
<Img
|
||||
src={SCREENSHOTS.desktopBothClaude}
|
||||
style={{ width: 1920, height: 1080 }}
|
||||
/>
|
||||
</AbsoluteFill>
|
||||
)}
|
||||
|
||||
{/* Cursor: click Claude Code button on welcome screen */}
|
||||
<Sequence
|
||||
from={claudeClickFrame - 20}
|
||||
durationInFrames={35}
|
||||
layout="none"
|
||||
>
|
||||
<ClickCursor
|
||||
fromX={960}
|
||||
fromY={300}
|
||||
x={welcomeBtnClaudeX}
|
||||
y={welcomeBtnClaudeY}
|
||||
moveStart={0}
|
||||
clickAt={20}
|
||||
/>
|
||||
</Sequence>
|
||||
|
||||
{/* Cursor: click to add OpenCode tab */}
|
||||
<Sequence
|
||||
from={bothStart - 20}
|
||||
durationInFrames={35}
|
||||
layout="none"
|
||||
>
|
||||
<ClickCursor
|
||||
fromX={welcomeBtnClaudeX}
|
||||
fromY={welcomeBtnClaudeY}
|
||||
x={welcomeBtnOpenCodeX}
|
||||
y={welcomeBtnOpenCodeY}
|
||||
moveStart={0}
|
||||
clickAt={20}
|
||||
/>
|
||||
</Sequence>
|
||||
|
||||
{/* Cursor: switch to Claude tab (first tab in header) */}
|
||||
<Sequence
|
||||
from={switch1Frame - 15}
|
||||
durationInFrames={20}
|
||||
layout="none"
|
||||
>
|
||||
<ClickCursor
|
||||
fromX={500}
|
||||
fromY={300}
|
||||
x={128}
|
||||
y={17}
|
||||
moveStart={0}
|
||||
clickAt={15}
|
||||
/>
|
||||
</Sequence>
|
||||
|
||||
{/* Cursor: switch back to OpenCode tab (second tab in header) */}
|
||||
<Sequence
|
||||
from={switch2Frame - 15}
|
||||
durationInFrames={20}
|
||||
layout="none"
|
||||
>
|
||||
<ClickCursor
|
||||
fromX={128}
|
||||
fromY={17}
|
||||
x={245}
|
||||
y={17}
|
||||
moveStart={0}
|
||||
clickAt={15}
|
||||
/>
|
||||
</Sequence>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── Device transition ───
|
||||
const DeviceTransition: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
const { fps } = useVideoConfig();
|
||||
|
||||
// Desktop shrinks down
|
||||
const shrinkProgress = spring({
|
||||
frame,
|
||||
fps,
|
||||
config: { damping: 200 },
|
||||
durationInFrames: 45,
|
||||
});
|
||||
|
||||
const desktopScale = interpolate(shrinkProgress, [0, 1], [1, 0.35]);
|
||||
const desktopOpacity = interpolate(shrinkProgress, [0, 1], [1, 0], {
|
||||
extrapolateRight: 'clamp',
|
||||
});
|
||||
|
||||
// Phone frame fades in
|
||||
const phoneOpacity = interpolate(frame, [20, 40], [0, 1], {
|
||||
extrapolateLeft: 'clamp',
|
||||
extrapolateRight: 'clamp',
|
||||
});
|
||||
const phoneScale = interpolate(frame, [20, 50], [0.8, 1], {
|
||||
extrapolateLeft: 'clamp',
|
||||
extrapolateRight: 'clamp',
|
||||
});
|
||||
|
||||
return (
|
||||
<AbsoluteFill
|
||||
style={{
|
||||
background: colors.bg.dark,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{/* Shrinking desktop screenshot */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
transform: `scale(${desktopScale})`,
|
||||
opacity: desktopOpacity,
|
||||
}}
|
||||
>
|
||||
<Img
|
||||
src={SCREENSHOTS.desktopBothClaude}
|
||||
style={{ width: 1920, height: 1080 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Phone frame appearing */}
|
||||
<div
|
||||
style={{
|
||||
opacity: phoneOpacity,
|
||||
transform: `scale(${phoneScale})`,
|
||||
}}
|
||||
>
|
||||
<PhoneFrame width={375} height={700}>
|
||||
<Img
|
||||
src={SCREENSHOTS.mobileClaude}
|
||||
style={{ width: 375, height: 700, objectFit: 'cover' }}
|
||||
/>
|
||||
</PhoneFrame>
|
||||
</div>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── Mobile scene ───
|
||||
const MobileDemo: React.FC = () => {
|
||||
const frame = useCurrentFrame();
|
||||
|
||||
// Mobile: Claude for 90 frames, then swipe to OpenCode
|
||||
const swipeFrame = 90;
|
||||
const swipeDuration = 20;
|
||||
|
||||
const isOpenCode = frame >= swipeFrame + swipeDuration;
|
||||
const isSwiping =
|
||||
frame >= swipeFrame && frame < swipeFrame + swipeDuration;
|
||||
|
||||
// Slide offset
|
||||
const slideProgress = isSwiping
|
||||
? interpolate(frame - swipeFrame, [0, swipeDuration], [0, 1], {
|
||||
extrapolateRight: 'clamp',
|
||||
})
|
||||
: isOpenCode
|
||||
? 1
|
||||
: 0;
|
||||
|
||||
const slideX = interpolate(slideProgress, [0, 1], [0, -375]);
|
||||
|
||||
return (
|
||||
<PhoneFrame width={375} height={700}>
|
||||
<div
|
||||
style={{
|
||||
width: 375,
|
||||
height: 700,
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
{/* Sliding container with both screenshots */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
width: 750,
|
||||
height: 700,
|
||||
transform: `translateX(${slideX}px)`,
|
||||
}}
|
||||
>
|
||||
<Img
|
||||
src={SCREENSHOTS.mobileClaude}
|
||||
style={{ width: 375, height: 700, flexShrink: 0, objectFit: 'cover' }}
|
||||
/>
|
||||
<Img
|
||||
src={SCREENSHOTS.mobileOpencode}
|
||||
style={{ width: 375, height: 700, flexShrink: 0, objectFit: 'cover' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Swipe indicator */}
|
||||
{isSwiping && (
|
||||
<SwipeIndicator
|
||||
frame={frame - swipeFrame}
|
||||
duration={swipeDuration}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</PhoneFrame>
|
||||
);
|
||||
};
|
||||
|
||||
// Swipe gesture indicator
|
||||
const SwipeIndicator: React.FC<{ frame: number; duration: number }> = ({
|
||||
frame,
|
||||
duration,
|
||||
}) => {
|
||||
const progress = interpolate(frame, [0, duration], [0, 1], {
|
||||
extrapolateRight: 'clamp',
|
||||
});
|
||||
const x = interpolate(progress, [0, 1], [300, 75]);
|
||||
const opacity = interpolate(
|
||||
progress,
|
||||
[0, 0.2, 0.8, 1],
|
||||
[0, 0.7, 0.7, 0],
|
||||
{ extrapolateRight: 'clamp' },
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: 60,
|
||||
left: x,
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255,255,255,0.15)',
|
||||
border: '2px solid rgba(255,255,255,0.3)',
|
||||
opacity,
|
||||
zIndex: 20,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
// ─── Main composition ───
|
||||
export const CodemanDemo: React.FC = () => {
|
||||
return (
|
||||
<AbsoluteFill style={{ background: colors.bg.dark }}>
|
||||
{/* Scene 1: Title */}
|
||||
<Sequence durationInFrames={TITLE_DUR} premountFor={0}>
|
||||
<TitleCard text="Codeman" subtitle="AI Session Manager" />
|
||||
</Sequence>
|
||||
|
||||
{/* Scene 2-5: Desktop flow (cross-fading screenshots) */}
|
||||
<Sequence
|
||||
from={DESKTOP_START}
|
||||
durationInFrames={DESKTOP_DUR}
|
||||
premountFor={15}
|
||||
>
|
||||
<DesktopDemo />
|
||||
</Sequence>
|
||||
|
||||
{/* Scene 6: Desktop → Mobile transition */}
|
||||
<Sequence
|
||||
from={TRANSITION_START}
|
||||
durationInFrames={TRANSITION_DUR}
|
||||
premountFor={15}
|
||||
>
|
||||
<DeviceTransition />
|
||||
</Sequence>
|
||||
|
||||
{/* Scene 7-9: Mobile flow (swipe between Claude/OpenCode) */}
|
||||
<Sequence
|
||||
from={MOBILE_START}
|
||||
durationInFrames={MOBILE_DUR}
|
||||
premountFor={15}
|
||||
>
|
||||
<AbsoluteFill
|
||||
style={{
|
||||
background: colors.bg.dark,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<MobileDemo />
|
||||
</AbsoluteFill>
|
||||
</Sequence>
|
||||
|
||||
{/* Scene 10: Outro */}
|
||||
<Sequence
|
||||
from={OUTRO_START}
|
||||
durationInFrames={OUTRO_DUR}
|
||||
premountFor={15}
|
||||
>
|
||||
<TitleCard
|
||||
text="Codeman"
|
||||
subtitle="Manage any AI coding tool"
|
||||
showUrl
|
||||
/>
|
||||
</Sequence>
|
||||
</AbsoluteFill>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user