+ );
+}
+
+function ChecklistItem({
+ frame,
+ fps,
+ index,
+ label,
+}: {
+ frame: number;
+ fps: number;
+ index: number;
+ label: string;
+}) {
+ const done = motionProgress(
+ frame,
+ seconds(3.2 + index * 0.32, fps),
+ seconds(0.35, fps),
+ );
+
+ return (
+
+ );
+}
+
+function ProgressCard({ frame, fps }: { frame: number; fps: number }) {
+ const style = cardStyle(frame, fps, 2.68, 2.7, 46);
+ const barProgress = motionProgress(
+ frame,
+ seconds(3.05, fps),
+ seconds(1.6, fps),
+ EASE_IN_OUT,
+ );
+
+ return (
+
+ );
+}
+
+function MetricBar({
+ label,
+ progress,
+ target,
+ color,
+}: {
+ label: string;
+ progress: number;
+ target: number;
+ color: string;
+}) {
+ return (
+
+ );
+}
+
+function Heatmap({ frame, fps }: { frame: number; fps: number }) {
+ return (
+
+ );
+}
+
+function SceneCaption({ frame, fps }: { frame: number; fps: number }) {
+ const caption = motionProgress(frame, seconds(2.05, fps), seconds(0.85, fps));
+ const chips = motionProgress(frame, seconds(2.55, fps), seconds(0.9, fps));
+ const highlight = motionProgress(
+ frame,
+ seconds(2.65, fps),
+ seconds(0.9, fps),
+ EASE_IN_OUT,
+ );
+
+ return (
+
+ );
+}
+
+function TransitionHint({ frame, fps }: { frame: number; fps: number }) {
+ const wipe = motionProgress(
+ frame,
+ seconds(5.15, fps),
+ seconds(0.72, fps),
+ EASE_IN_OUT,
+ );
+
+ return (
+
+ );
+}
+
+function ProblemScene() {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+ const reveal = motionProgress(frame, 0, seconds(0.9, fps), EASE_IN_OUT);
+ const revealEdgeTop = interpolate(reveal, [0, 1], [108, -12]);
+ const revealEdgeBottom = interpolate(reveal, [0, 1], [100, -20]);
+ const content = motionProgress(frame, seconds(0.45, fps), seconds(0.95, fps));
+ const bridge = motionProgress(frame, seconds(4.45, fps), seconds(0.75, fps));
+ const settle = motionProgress(
+ frame,
+ seconds(2.8, fps),
+ seconds(1.7, fps),
+ EASE_IN_OUT,
+ );
+
+ return (
+
+ );
+}
+
+function ProblemBackground({ frame, fps }: { frame: number; fps: number }) {
+ const grid = motionProgress(frame, seconds(0.1, fps), seconds(1.3, fps));
+ const sweep = ((frame % seconds(4.8, fps)) / seconds(4.8, fps)) * 1;
+ const sweepX = interpolate(sweep, [0, 1], [-520, 2200]);
+
+ return (
+ <>
+
+
+ );
+}
+
+function ProblemWarningField({ frame, fps }: { frame: number; fps: number }) {
+ const warning = motionProgress(
+ frame,
+ seconds(1.25, fps),
+ seconds(1.55, fps),
+ EASE_IN_OUT,
+ );
+ const sweep = ((frame % seconds(2.7, fps)) / seconds(2.7, fps)) * 1;
+ const scanX = interpolate(sweep, [0, 1], [-380, 1220]);
+ const tremor = Math.sin(frame / 5) * 3;
+
+ return (
+ <>
+
+
+ );
+}
+
+function ScatteredIssueBoard({
+ frame,
+ fps,
+ settle,
+}: {
+ frame: number;
+ fps: number;
+ settle: number;
+}) {
+ const board = motionProgress(frame, seconds(0.62, fps), seconds(1.0, fps));
+ const signalReveal = motionProgress(
+ frame,
+ seconds(2.18, fps),
+ seconds(0.78, fps),
+ EASE_OUT,
+ );
+ const signalFocus = motionProgress(
+ frame,
+ seconds(2.62, fps),
+ seconds(0.86, fps),
+ EASE_IN_OUT,
+ );
+ const signalScale =
+ interpolate(signalReveal, [0, 1], [0.88, 1]) *
+ interpolate(signalFocus, [0, 0.52, 1], [1, 1.045, 1.01]);
+ const problemPressure = motionProgress(
+ frame,
+ seconds(1.82, fps),
+ seconds(1.45, fps),
+ EASE_IN_OUT,
+ );
+
+ return (
+
+ );
+}
+
+function IssueNode({
+ frame,
+ fps,
+ node,
+ problemPressure,
+}: {
+ frame: number;
+ fps: number;
+ node: (typeof issueNodes)[number];
+ problemPressure: number;
+}) {
+ const enter = motionProgress(
+ frame,
+ seconds(0.9 + node.delay, fps),
+ seconds(0.72, fps),
+ );
+ const float = Math.sin(frame / 28 + node.x / 60) * 8;
+ const alert = motionProgress(
+ frame,
+ seconds(2.7 + node.delay, fps),
+ seconds(0.7, fps),
+ );
+ const jitter = interpolate(problemPressure, [0, 0.58, 1], [0, 7, 2.4]);
+ const stressRotation =
+ Math.sin(frame / 4.5 + node.x / 90) *
+ interpolate(problemPressure, [0, 1], [0, 2.2]);
+
+ return (
+
+
+
+
+
+
+
+
+
+ {node.title}
+
+
+ {node.meta}
+
+
+
+
0.5 ? "#f59e0b" : "#dbeafe",
+ boxShadow: alert > 0.5 ? "0 0 18px rgba(245,158,11,0.46)" : "none",
+ transform: `scale(${interpolate(alert, [0, 1], [0.75, 1.15])})`,
+ }}
+ />
+
+
+ );
+}
+
+function IssueIcon({ kind }: { kind: (typeof issueNodes)[number]["kind"] }) {
+ if (kind === "users") {
+ return
;
+ }
+
+ if (kind === "search") {
+ return
;
+ }
+
+ if (kind === "message") {
+ return
;
+ }
+
+ if (kind === "calendar") {
+ return
;
+ }
+
+ return
;
+}
+
+function SignalBar({
+ color,
+ delay,
+ frame,
+ fps,
+}: {
+ color: string;
+ delay: number;
+ frame: number;
+ fps: number;
+}) {
+ const progress = motionProgress(
+ frame,
+ seconds(delay, fps),
+ seconds(0.55, fps),
+ );
+
+ return (
+
+ );
+}
+
+function PainPointRail({ frame, fps }: { frame: number; fps: number }) {
+ return (
+
+ {painPoints.map((point, index) => {
+ const enter = motionProgress(
+ frame,
+ seconds(2.9 + index * 0.18, fps),
+ seconds(0.72, fps),
+ );
+
+ return (
+
+
+
+
+ {point.label}
+
+
+
+ {point.title}
+
+
+ {point.detail}
+
+
+ );
+ })}
+
+ );
+}
+
+function ProblemRevealEdge({ reveal }: { reveal: number }) {
+ return (
+
+ );
+}
+
+function MatchingScene() {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+ const reveal = motionProgress(frame, 0, seconds(0.92, fps), EASE_IN_OUT);
+ const revealEdgeTop = interpolate(reveal, [0, 1], [110, -16]);
+ const revealEdgeBottom = interpolate(reveal, [0, 1], [100, -26]);
+ const intro = motionProgress(frame, seconds(0.35, fps), seconds(0.85, fps));
+ const board = motionProgress(frame, seconds(0.7, fps), seconds(1.05, fps));
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+function MatchingBackground({ frame, fps }: { frame: number; fps: number }) {
+ const grid = motionProgress(frame, seconds(0.12, fps), seconds(1.2, fps));
+ const scan = (frame % seconds(4.4, fps)) / seconds(4.4, fps);
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+function MatchingNarrativePanel({
+ frame,
+ fps,
+ progress,
+}: {
+ frame: number;
+ fps: number;
+ progress: number;
+}) {
+ const underline = motionProgress(
+ frame,
+ seconds(1.35, fps),
+ seconds(0.7, fps),
+ EASE_IN_OUT,
+ );
+
+ return (
+
+
+
+ Solution 01
+
+
+ 매칭으로
+
+
+ 팀을 바로 시작해요
+
+
+
+
+ 역할과 프로젝트 정보를 보내면
+
팀 매칭 요청이 바로 시작됩니다.
+
+
+ );
+}
+
+function MatchingOrbitBoard({
+ frame,
+ fps,
+ progress,
+}: {
+ frame: number;
+ fps: number;
+ progress: number;
+}) {
+ const buttonClick = motionProgress(
+ frame,
+ seconds(1.85, fps),
+ seconds(0.45, fps),
+ EASE_IN_OUT,
+ );
+ const panel = motionProgress(frame, seconds(3.2, fps), seconds(0.9, fps));
+ const scan = motionProgress(frame, seconds(2.25, fps), seconds(0.9, fps));
+
+ return (
+
+
+
+
+
+
+
+ team-po.cloud/matching
+
+
+
+
+
+
+
+
+
+
Team-po
+
+ Matching workspace
+
+
+
+
+ 팀 매칭
+
+ 팀 스페이스
+ 리포트
+
+
+
+
+
+
+
+
+
+
+
+
+ 매칭 세션
+
+
+ 팀원 역할과 응답 상태를 확인해요
+
+
+
+
+ BACKEND · FRONTEND · DESIGN
+
+
+ {matchingProfiles.map((profile, index) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ );
+}
+
+function MatchingDemoCard({
+ frame,
+ fps,
+ index,
+ profile,
+}: {
+ frame: number;
+ fps: number;
+ index: number;
+ profile: (typeof matchingProfiles)[number];
+}) {
+ const enter = motionProgress(
+ frame,
+ seconds(1.0 + profile.delay, fps),
+ seconds(0.72, fps),
+ );
+ const selected = motionProgress(
+ frame,
+ seconds(2.45 + index * 0.18, fps),
+ seconds(0.45, fps),
+ EASE_IN_OUT,
+ );
+ const isAccepted = profile.status === "수락됨";
+ const responseWidth = isAccepted ? 100 : 58;
+
+ return (
+
0.55 ? profile.color : "#e2e8f0",
+ backgroundColor: selected > 0.55 ? "#f8fffc" : "#ffffff",
+ opacity: enter,
+ transform: `translate3d(0, ${interpolate(enter, [0, 1], [30, 0])}px, 0) scale(${interpolate(selected, [0, 1], [1, 1.025])})`,
+ }}
+ >
+
+
+
+
+
+
+
+ {profile.name}
+
+
+ {profile.stack}
+
+
+
+
0.55 ? `${profile.statusColor}55` : "#e2e8f0",
+ backgroundColor:
+ selected > 0.55 ? `${profile.statusColor}12` : "#ffffff",
+ color: selected > 0.55 ? profile.statusColor : "#94a3b8",
+ }}
+ >
+ {profile.status}
+
+
+
+
+
응답 상태
+
+ {isAccepted ? "수락 완료" : "대기 중"}
+
+
+
+
+
+ );
+}
+
+function MatchingTouchPulse({ frame, fps }: { frame: number; fps: number }) {
+ const startButton = motionProgress(
+ frame,
+ seconds(1.86, fps),
+ seconds(0.42, fps),
+ );
+ const candidate = motionProgress(
+ frame,
+ seconds(2.62, fps),
+ seconds(0.5, fps),
+ );
+ const teamPanel = motionProgress(
+ frame,
+ seconds(3.48, fps),
+ seconds(0.55, fps),
+ );
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+function MatchingProfileIcon({
+ icon,
+}: {
+ icon: (typeof matchingProfiles)[number]["icon"];
+}) {
+ if (icon === "code") {
+ return
;
+ }
+
+ if (icon === "database") {
+ return
;
+ }
+
+ return
;
+}
+
+function RecommendedTeamPanel({
+ frame,
+ fps,
+ progress,
+}: {
+ frame: number;
+ fps: number;
+ progress: number;
+}) {
+ const spark = motionProgress(
+ frame,
+ seconds(3.55, fps),
+ seconds(1.1, fps),
+ EASE_IN_OUT,
+ );
+
+ return (
+
+
+
+
+
+
+
+
+
+ 매칭 세션이 생성됐어요
+
+
+ 팀원들이 수락하면 팀 스페이스로 이어집니다.
+
+
+
+
+ {matchedRoleSlots.map((role, index) => (
+
+ {role.label}
+
+ ))}
+
+
+
+
응답 상태
+
+ 2/4
+
+
+ 호스트 포함 2명 수락
+
+
+
+
+ );
+}
+
+function MatchingRevealEdge({ reveal }: { reveal: number }) {
+ return (
+
+ );
+}
+
+function WorkspaceDemoScene() {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+ const reveal = motionProgress(frame, 0, seconds(0.9, fps), EASE_IN_OUT);
+ const revealEdgeTop = interpolate(reveal, [0, 1], [112, -18]);
+ const revealEdgeBottom = interpolate(reveal, [0, 1], [102, -26]);
+ const intro = motionProgress(frame, seconds(0.32, fps), seconds(0.82, fps));
+ const windowProgress = motionProgress(
+ frame,
+ seconds(0.62, fps),
+ seconds(1.0, fps),
+ );
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+function WorkspaceDemoBackground({
+ frame,
+ fps,
+}: {
+ frame: number;
+ fps: number;
+}) {
+ const grid = motionProgress(frame, seconds(0.1, fps), seconds(1.1, fps));
+ const sweep = (frame % seconds(5, fps)) / seconds(5, fps);
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+function WorkspaceNarrativePanel({
+ frame,
+ fps,
+ progress,
+}: {
+ frame: number;
+ fps: number;
+ progress: number;
+}) {
+ const underline = motionProgress(
+ frame,
+ seconds(1.25, fps),
+ seconds(0.72, fps),
+ EASE_IN_OUT,
+ );
+
+ return (
+
+
+
+ Solution 02
+
+
+ 팀이 생기면
+
+
+ 바로 운영 화면으로
+
+
+
+
+ 상태, 역할, 체크리스트가 한 페이지에서 움직여서
+
+ 팀이 “지금 뭘 해야 하는지” 바로 보입니다.
+
+
+ );
+}
+
+function WorkspaceDemoWindow({
+ frame,
+ fps,
+ progress,
+}: {
+ frame: number;
+ fps: number;
+ progress: number;
+}) {
+ const stageProgress = motionProgress(
+ frame,
+ seconds(2.0, fps),
+ seconds(2.5, fps),
+ EASE_IN_OUT,
+ );
+ const drawer = motionProgress(frame, seconds(3.35, fps), seconds(0.82, fps));
+
+ return (
+
+
+
+
+
+
+
+ team-po.cloud/team-space
+
+
+
+
+
+
+
+
+
+
+ MVP 런칭 스쿼드
+
+
+ 랜덤 매칭으로 생성된 팀 스페이스
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function WorkspaceStageRail({
+ frame,
+ fps,
+ progress,
+}: {
+ frame: number;
+ fps: number;
+ progress: number;
+}) {
+ const progressWidth = interpolate(progress, [0, 1], [12, 96]);
+
+ return (
+
+
+
+ {lifecycleStages.map((stage, index) => {
+ const active = motionProgress(
+ frame,
+ seconds(1.6 + index * 0.42, fps),
+ seconds(0.45, fps),
+ );
+
+ return (
+
0.55 ? "#3b82f6" : "#e2e8f0",
+ color: active > 0.55 ? "#ffffff" : "#94a3b8",
+ transform: `translate3d(-50%, -50%, 0) scale(${interpolate(active, [0, 1], [0.82, 1.08])})`,
+ }}
+ >
+
+
+ );
+ })}
+
+
+ forming
+ active
+ shipping
+ done
+
+
+ );
+}
+
+function WorkspaceBoard({ frame, fps }: { frame: number; fps: number }) {
+ const columns = ["forming", "active", "shipping"] as const;
+
+ return (
+
+
+
+ {columns.map((column) => (
+
+
+ {column}
+
+
+ {workspaceTasks
+ .filter((task) => task.column === column)
+ .map((task, index) => (
+
+ ))}
+
+
+ ))}
+
+
+ );
+}
+
+function WorkspaceTaskCard({
+ frame,
+ fps,
+ index,
+ task,
+}: {
+ frame: number;
+ fps: number;
+ index: number;
+ task: (typeof workspaceTasks)[number];
+}) {
+ const enter = motionProgress(
+ frame,
+ seconds(1.15 + task.delay, fps),
+ seconds(0.58, fps),
+ );
+ const lift = motionProgress(frame, seconds(2.55, fps), seconds(0.65, fps));
+
+ return (
+
0.2
+ ? "0 18px 38px rgba(16,185,129,0.16)"
+ : "0 1px 2px rgba(15,23,42,0.04)",
+ }}
+ >
+
+
+
+ D-{4 - index}
+
+
+
+ {task.title}
+
+
{task.meta}
+
+ );
+}
+
+function WorkspaceChecklist({ frame, fps }: { frame: number; fps: number }) {
+ return (
+
+
+
+ {workspaceChecklist.map((item, index) => {
+ const done = motionProgress(
+ frame,
+ seconds(2.0 + index * 0.36, fps),
+ seconds(0.42, fps),
+ );
+
+ return (
+
+
0.5 ? "#10b981" : "#dbeafe",
+ backgroundColor: done > 0.5 ? "#ecfdf5" : "#ffffff",
+ }}
+ >
+
+
+
{item}
+
+ );
+ })}
+
+
+
다음 액션
+
+ 배포 체크리스트 만들기
+
+
+
+ );
+}
+
+function WorkspaceActionDrawer({ progress }: { progress: number }) {
+ return (
+
+
+
+
+
+
+
active 단계로 전환
+
+ 팀원에게 다음 액션이 공유됩니다
+
+
+
+
+
+ );
+}
+
+function WorkspaceTouchPulse({ frame, fps }: { frame: number; fps: number }) {
+ const stageTap = motionProgress(
+ frame,
+ seconds(2.18, fps),
+ seconds(0.46, fps),
+ );
+ const taskTap = motionProgress(frame, seconds(2.78, fps), seconds(0.48, fps));
+ const drawerTap = motionProgress(
+ frame,
+ seconds(3.62, fps),
+ seconds(0.5, fps),
+ );
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+function TouchPulse({
+ color,
+ progress,
+ x,
+ y,
+}: {
+ color: string;
+ progress: number;
+ x: number;
+ y: number;
+}) {
+ return (
+
+ );
+}
+
+function ReportDemoScene() {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+ const reveal = motionProgress(frame, 0, seconds(0.92, fps), EASE_IN_OUT);
+ const revealEdgeTop = interpolate(reveal, [0, 1], [112, -18]);
+ const revealEdgeBottom = interpolate(reveal, [0, 1], [102, -28]);
+ const intro = motionProgress(frame, seconds(0.32, fps), seconds(0.84, fps));
+ const windowProgress = motionProgress(
+ frame,
+ seconds(0.62, fps),
+ seconds(1.02, fps),
+ );
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+function ReportDemoBackground({ frame, fps }: { frame: number; fps: number }) {
+ const grid = motionProgress(frame, seconds(0.1, fps), seconds(1.1, fps));
+ const sweep = (frame % seconds(4.8, fps)) / seconds(4.8, fps);
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+function ReportNarrativePanel({
+ frame,
+ fps,
+ progress,
+}: {
+ frame: number;
+ fps: number;
+ progress: number;
+}) {
+ const underline = motionProgress(
+ frame,
+ seconds(1.22, fps),
+ seconds(0.72, fps),
+ EASE_IN_OUT,
+ );
+
+ return (
+
+
+
+ Solution 03
+
+
+ 진척은 자동으로
+
+
+ 팀에게 돌아와요
+
+
+
+
+ GitHub, 체크리스트, 활동 신호를 묶어
+
+ 다음 액션이 필요한 지점을 바로 보여줍니다.
+
+
+ );
+}
+
+function ReportDemoWindow({
+ frame,
+ fps,
+ progress,
+}: {
+ frame: number;
+ fps: number;
+ progress: number;
+}) {
+ const insight = motionProgress(frame, seconds(3.15, fps), seconds(0.9, fps));
+
+ return (
+
+
+
+
+
+
+
+ team-po.cloud/report
+
+
+
+
+
+
+
+
+
+
+ 진척 리포트
+
+
+ GitHub + 체크리스트 + 팀 활동 신호
+
+
+
+
+ AI signal synced
+
+
+ {reportMetrics.map((metric, index) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function ReportMetricCard({
+ frame,
+ fps,
+ index,
+ metric,
+}: {
+ frame: number;
+ fps: number;
+ index: number;
+ metric: (typeof reportMetrics)[number];
+}) {
+ const enter = motionProgress(
+ frame,
+ seconds(1.05 + index * 0.15, fps),
+ seconds(0.55, fps),
+ );
+ const fill = motionProgress(
+ frame,
+ seconds(1.7 + index * 0.18, fps),
+ seconds(1.1, fps),
+ EASE_IN_OUT,
+ );
+
+ return (
+
+
+
+ {Math.round(metric.value * fill)}%
+
+
+
+ );
+}
+
+function ReportTrendChart({ frame, fps }: { frame: number; fps: number }) {
+ const draw = motionProgress(frame, seconds(1.8, fps), seconds(1.6, fps));
+ const points = [
+ { x: 32, y: 210 },
+ { x: 112, y: 172 },
+ { x: 192, y: 184 },
+ { x: 272, y: 118 },
+ { x: 352, y: 96 },
+ { x: 432, y: 62 },
+ ];
+
+ return (
+
+
+
+
완주 추세
+
+ 최근 6일 활동 흐름
+
+
+
+ +18%
+
+
+
+
+ );
+}
+
+function ReportActivityList({ frame, fps }: { frame: number; fps: number }) {
+ return (
+
+
+
+ {reportRows.map((row, index) => {
+ const enter = motionProgress(
+ frame,
+ seconds(1.55 + index * 0.22, fps),
+ seconds(0.52, fps),
+ );
+
+ return (
+
+ );
+ })}
+
+
+ );
+}
+
+function ReportInsightPanel({ progress }: { progress: number }) {
+ return (
+
+
+
+
+
+
+
+
+ 이번 주 병목은 API 응답 지연 PR
+
+
+ 배포 체크리스트보다 API 응답 지연 PR을 먼저 마무리해요.
+
+
+
+
+
next action
+
+ BE 리뷰 요청
+
+
+
+
+ );
+}
+
+function ReportTouchPulse({ frame, fps }: { frame: number; fps: number }) {
+ const metricTap = motionProgress(
+ frame,
+ seconds(1.76, fps),
+ seconds(0.48, fps),
+ );
+ const chartTap = motionProgress(
+ frame,
+ seconds(2.72, fps),
+ seconds(0.52, fps),
+ );
+ const insightTap = motionProgress(
+ frame,
+ seconds(3.62, fps),
+ seconds(0.52, fps),
+ );
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+function ClosingDemoScene() {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+ const reveal = motionProgress(frame, 0, seconds(0.92, fps), EASE_IN_OUT);
+ const revealEdgeTop = interpolate(reveal, [0, 1], [112, -18]);
+ const revealEdgeBottom = interpolate(reveal, [0, 1], [102, -28]);
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+function KineticRecapBackground({
+ frame,
+ fps,
+ reveal,
+}: {
+ frame: number;
+ fps: number;
+ reveal: number;
+}) {
+ const grid = motionProgress(frame, seconds(0.08, fps), seconds(1.1, fps));
+ const sweep = (frame % seconds(3.2, fps)) / seconds(3.2, fps);
+ const halo = motionProgress(frame, seconds(2.7, fps), seconds(1.5, fps));
+
+ return (
+ <>
+
+
+
+
+
+
+ );
+}
+
+function KineticRecapBrand({ frame, fps }: { frame: number; fps: number }) {
+ const brand = motionProgress(frame, seconds(0.22, fps), seconds(0.68, fps));
+ const po = motionProgress(frame, seconds(0.66, fps), seconds(0.42, fps));
+
+ return (
+
+
+
+ Team
+
+ -po
+
+
+
+ );
+}
+
+function KineticRecapHeadline({ frame, fps }: { frame: number; fps: number }) {
+ const label = motionProgress(frame, seconds(1.35, fps), seconds(0.45, fps));
+ const lineOne = motionProgress(frame, seconds(1.62, fps), seconds(0.58, fps));
+ const lineTwo = motionProgress(frame, seconds(1.95, fps), seconds(0.58, fps));
+ const lineThree = motionProgress(
+ frame,
+ seconds(2.32, fps),
+ seconds(0.58, fps),
+ );
+ const lock = motionProgress(
+ frame,
+ seconds(3.36, fps),
+ seconds(0.82, fps),
+ EASE_IN_OUT,
+ );
+ const underline = motionProgress(
+ frame,
+ seconds(3.58, fps),
+ seconds(0.78, fps),
+ EASE_IN_OUT,
+ );
+ const shine = motionProgress(
+ frame,
+ seconds(3.18, fps),
+ seconds(0.86, fps),
+ EASE_IN_OUT,
+ );
+ const shineStyle: CSSProperties = {
+ backgroundClip: "text",
+ backgroundImage:
+ "linear-gradient(112deg, transparent 0%, transparent 44%, rgba(219,234,254,0.18) 48%, rgba(255,255,255,0.88) 50%, rgba(96,165,250,0.42) 52%, transparent 57%, transparent 100%)",
+ backgroundPosition: `${interpolate(shine, [0, 1], [-172, 190])}% 50%`,
+ backgroundRepeat: "no-repeat",
+ backgroundSize: "340% 100%",
+ color: "transparent",
+ filter: `drop-shadow(0 0 ${interpolate(shine, [0, 0.52, 1], [0, 11, 0])}px rgba(96, 165, 250, 0.22))`,
+ opacity: interpolate(shine, [0, 0.14, 0.78, 1], [0, 0.68, 0.5, 0]),
+ WebkitBackgroundClip: "text",
+ WebkitTextFillColor: "transparent",
+ };
+
+ return (
+
+
+
+ Kinetic Service Recap
+
+
+
+
+ 팀 찾기부터
+
+
+ 완주까지
+
+
+ 한 흐름으로
+
+
+
+
+ 팀 찾기부터
+ 완주까지
+ 한 흐름으로
+
+
+
+ 매칭 후 바로 팀 스페이스에서 작업하고, 진척을 보며 완주까지 이어갑니다.
+
+
+ );
+}
+
+function KineticRecapRibbon({ frame, fps }: { frame: number; fps: number }) {
+ const flowPath =
+ "M-120 824 C250 640 516 884 786 712 C1048 545 1212 690 1464 542 C1638 440 1776 428 2060 544";
+ const draw = motionProgress(
+ frame,
+ seconds(0.9, fps),
+ seconds(2.5, fps),
+ EASE_IN_OUT,
+ );
+ const sweep = motionProgress(
+ frame,
+ seconds(3.08, fps),
+ seconds(1.05, fps),
+ EASE_IN_OUT,
+ );
+ const comet = motionProgress(
+ frame,
+ seconds(4.72, fps),
+ seconds(2.1, fps),
+ EASE_IN_OUT,
+ );
+ const cometOpacity = interpolate(comet, [0, 0.06, 0.9, 1], [0, 1, 0.88, 0]);
+ const dash = (frame % seconds(2.1, fps)) / seconds(2.1, fps);
+
+ return (
+
+ );
+}
+
+function KineticFeatureStream({ frame, fps }: { frame: number; fps: number }) {
+ return (
+ <>
+ {closingFlow.map((item, index) => (
+
+ ))}
+
+ );
+}
+
+function KineticFeatureToken({
+ frame,
+ fps,
+ index,
+ item,
+}: {
+ frame: number;
+ fps: number;
+ index: number;
+ item: (typeof closingFlow)[number];
+}) {
+ const targets = [
+ { x: 190, y: 782, fromX: -420, fromY: 150, rotate: -18 },
+ { x: 612, y: 850, fromX: -160, fromY: 360, rotate: 12 },
+ { x: 1110, y: 736, fromX: 280, fromY: 320, rotate: -10 },
+ { x: 1510, y: 602, fromX: 460, fromY: -170, rotate: 16 },
+ ] as const;
+ const target = targets[index] ?? targets[0];
+ const enter = motionProgress(
+ frame,
+ seconds(0.52 + index * 0.22, fps),
+ seconds(0.72, fps),
+ EASE_OUT,
+ );
+ const lock = motionProgress(
+ frame,
+ seconds(2.55 + index * 0.18, fps),
+ seconds(0.58, fps),
+ EASE_IN_OUT,
+ );
+ const pulse = motionProgress(
+ frame,
+ seconds(3.48 + index * 0.08, fps),
+ seconds(0.72, fps),
+ EASE_IN_OUT,
+ );
+ const ignition = motionProgress(
+ frame,
+ seconds(4.82 + index * 0.48, fps),
+ seconds(0.76, fps),
+ EASE_OUT,
+ );
+ const ignitionGlow = interpolate(ignition, [0, 0.32, 1], [0, 1, 0]);
+ const float =
+ Math.sin(frame / 13 + index * 1.8) * interpolate(lock, [0, 1], [20, 4]);
+
+ return (
+
+
+
+
+
+
+
+
+ 0{index + 1}
+
+
+ {item.label}
+
+
+
+ );
+}
+
+function KineticFeatureIcon({
+ id,
+}: {
+ id: (typeof closingFlow)[number]["id"];
+}) {
+ if (id === "matching") {
+ return
;
+ }
+
+ if (id === "workspace") {
+ return
;
+ }
+
+ if (id === "report") {
+ return
;
+ }
+
+ return
;
+}
+
+function FinaleLogoScene() {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+ const reveal = motionProgress(frame, 0, seconds(0.82, fps), EASE_IN_OUT);
+ const prompt = motionProgress(frame, seconds(0.22, fps), seconds(0.6, fps));
+ const blockOne = motionProgress(
+ frame,
+ seconds(0.46, fps),
+ seconds(0.44, fps),
+ );
+ const blockTwo = motionProgress(frame, seconds(0.6, fps), seconds(0.44, fps));
+ const blockThree = motionProgress(
+ frame,
+ seconds(0.74, fps),
+ seconds(0.44, fps),
+ );
+ const team = motionProgress(frame, seconds(0.9, fps), seconds(0.62, fps));
+ const po = motionProgress(frame, seconds(1.36, fps), seconds(0.5, fps));
+ const message = motionProgress(frame, seconds(1.86, fps), seconds(0.8, fps));
+ const underline = motionProgress(
+ frame,
+ seconds(2.2, fps),
+ seconds(0.9, fps),
+ EASE_IN_OUT,
+ );
+ const finalPulse = motionProgress(
+ frame,
+ seconds(4.2, fps),
+ seconds(1.4, fps),
+ EASE_IN_OUT,
+ );
+
+ return (
+
+
+
+ {[
+ { top: 150, delay: 0, color: "rgba(59,130,246,0.22)" },
+ { top: 826, delay: 42, color: "rgba(16,185,129,0.22)" },
+ { top: 936, delay: 88, color: "rgba(245,158,11,0.2)" },
+ ].map((line) => {
+ const travel =
+ ((frame + line.delay) % seconds(5.6, fps)) / seconds(5.6, fps);
+
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+
+
+ Team
+
+
+ -po
+
+
+
+
+ 사이드 프로젝트를
+
+
+ 끝까지 움직이게
+
+
+
+
+ 팀 찾기부터 완주까지, Team-po
+
+
+ 팀 프로젝트의 시작과
+ 완주를 한 곳에서
+
+
+ );
+}
+
+function issueColor(color: (typeof issueNodes)[number]["color"]) {
+ if (color === "blue") {
+ return "#3b82f6";
+ }
+
+ if (color === "emerald") {
+ return "#10b981";
+ }
+
+ if (color === "amber") {
+ return "#f59e0b";
+ }
+
+ if (color === "rose") {
+ return "#f43f5e";
+ }
+
+ return "#6366f1";
+}
+
+function cardStyle(
+ frame: number,
+ fps: number,
+ startSeconds: number,
+ floatOffset: number,
+ yOffset: number,
+): CSSProperties {
+ const enter = motionProgress(
+ frame,
+ seconds(startSeconds, fps),
+ seconds(0.82, fps),
+ );
+ const y =
+ interpolate(enter, [0, 1], [yOffset, 0]) +
+ Math.sin(frame / 27 + floatOffset) * 5;
+
+ return {
+ opacity: enter,
+ transform: `translate3d(${interpolate(enter, [0, 1], [72, 0])}px, ${y}px, 0) scale(${interpolate(
+ enter,
+ [0, 1],
+ [0.94, 1],
+ )})`,
+ };
+}
+
+function seconds(value: number, fps: number) {
+ return Math.round(value * fps);
+}
+
+function motionProgress(
+ frame: number,
+ start: number,
+ duration: number,
+ easing: (value: number) => number = EASE_OUT,
+) {
+ return interpolate(frame, [start, start + duration], [0, 1], {
+ easing,
+ extrapolateLeft: "clamp",
+ extrapolateRight: "clamp",
+ });
+}
diff --git a/src/features/pr-video/constants.ts b/src/features/pr-video/constants.ts
new file mode 100644
index 0000000..fd061d9
--- /dev/null
+++ b/src/features/pr-video/constants.ts
@@ -0,0 +1,62 @@
+export const TEAM_PO_PR_VIDEO = {
+ id: "TeamPoPrVideo",
+ width: 1920,
+ height: 1080,
+ fps: 30,
+ durationInFrames: 1770,
+} as const;
+
+export const openingSceneTimeline = [
+ {
+ time: "0.0s",
+ label: "프롬프트와 블록이 조립",
+ },
+ {
+ time: "1.2s",
+ label: "Team 리빌 후 -po 등장",
+ },
+ {
+ time: "2.0s",
+ label: "핵심 UI 카드 진입",
+ },
+ {
+ time: "5.5s",
+ label: "사선 와이프로 문제 제기 씬 전환",
+ },
+ {
+ time: "6.0s",
+ label: "팀 구성과 완주가 어려운 이유를 모션으로 제시",
+ },
+ {
+ time: "11.0s",
+ label: "랜덤 팀 매칭 씬으로 밝게 리빌",
+ },
+ {
+ time: "13.5s",
+ label: "프로필 신호가 팀 조합으로 수렴",
+ },
+ {
+ time: "20.0s",
+ label: "팀 워크스페이스 기능 시연 UI 진입",
+ },
+ {
+ time: "24.0s",
+ label: "라이프사이클과 체크리스트가 함께 업데이트",
+ },
+ {
+ time: "30.0s",
+ label: "진척 리포트 대시보드 UI 진입",
+ },
+ {
+ time: "35.0s",
+ label: "GitHub 활동과 AI 인사이트가 다음 액션으로 연결",
+ },
+ {
+ time: "41.0s",
+ label: "Team-po 전체 완주 플로우를 짧게 요약",
+ },
+ {
+ time: "50.0s",
+ label: "로고 기반 임팩트 메시지로 피날레",
+ },
+] as const;
diff --git a/src/features/pr-video/remotion-root.tsx b/src/features/pr-video/remotion-root.tsx
new file mode 100644
index 0000000..420fba9
--- /dev/null
+++ b/src/features/pr-video/remotion-root.tsx
@@ -0,0 +1,17 @@
+import { Composition } from "remotion";
+
+import { TEAM_PO_PR_VIDEO } from "@/features/pr-video/constants";
+import { TeamPoPrVideo } from "@/features/pr-video/components/team-po-pr-video";
+
+export function RemotionRoot() {
+ return (
+
+ );
+}
diff --git a/src/pages/pr-video-page.tsx b/src/pages/pr-video-page.tsx
new file mode 100644
index 0000000..29891b2
--- /dev/null
+++ b/src/pages/pr-video-page.tsx
@@ -0,0 +1,64 @@
+import { ArrowLeft, Film, MonitorPlay } from "lucide-react";
+import { Link } from "react-router-dom";
+
+import { Button } from "@/components/ui/button";
+import { PrVideoPlayer } from "@/features/pr-video/components/pr-video-player";
+import {
+ TEAM_PO_PR_VIDEO,
+ openingSceneTimeline,
+} from "@/features/pr-video/constants";
+
+export function PrVideoPage() {
+ return (
+
+
+
+
+
+
+
+ {openingSceneTimeline.map((item) => (
+
+
{item.time}
+
+ {item.label}
+
+
+
+ );
+}
diff --git a/src/remotion-entry.tsx b/src/remotion-entry.tsx
new file mode 100644
index 0000000..561b2c7
--- /dev/null
+++ b/src/remotion-entry.tsx
@@ -0,0 +1,6 @@
+import { registerRoot } from "remotion";
+
+import { RemotionRoot } from "@/features/pr-video/remotion-root";
+import "@/index.css";
+
+registerRoot(RemotionRoot);
diff --git a/tsconfig.node.json b/tsconfig.node.json
index e75109e..1827773 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -22,5 +22,5 @@
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
- "include": ["vite.config.ts"]
+ "include": ["vite.config.ts", "remotion.config.ts"]
}