@xcelsior/demo-pipeline 0.1.0

package/template/pipeline/run.sh

@@ -0,0 +1,45 @@
+#!/usr/bin/env bash
+# Full pipeline: capture web (+ mobile) -> voice-over -> sync assets -> render.
+# Env: RUN_DIR (default runs/<timestamp>), MOBILE=0 to skip, MUSIC=1 to add music bed.
+set -euo pipefail
+cd "$(dirname "$0")/.."   # tool root
+
+CFG=demo.config.json
+get() { node -e "console.log((require('./$CFG').$1)??'')"; }
+
+RUN="${RUN_DIR:-runs/$(date +%y%m%d-%H%M%S)}"
+mkdir -p "$RUN"/{raw,events,vo,edited,final}
+ABS_RUN="$PWD/$RUN"
+echo "RUN=$RUN"
+
+export LNG_BASE_URL="$(get baseUrl)"
+export LNG_EMAIL="${LNG_EMAIL:-$(get auth.defaultEmail)}"
+export LNG_PWD="${LNG_PWD:-}"
+export UDID="$(get sim.udid)"
+
+echo "== 1/5 capture web =="
+RUN_DIR="$ABS_RUN" .venv/bin/python pipeline/capture_web.py
+
+if [ "${MOBILE:-1}" = "1" ] && command -v maestro >/dev/null; then
+  echo "== 2/5 capture mobile =="
+  RUN_DIR="$ABS_RUN" bash pipeline/capture_mobile.sh || echo "  mobile skipped/failed"
+fi
+
+echo "== 3/5 voice-over (Kokoro) =="
+.venv/bin/python pipeline/gen_vo.py models "$RUN/vo"
+
+echo "== 4/5 sync assets into remotion =="
+mkdir -p remotion/public/run/vo remotion/public/brand
+cp "$RUN/raw/web.webm" remotion/public/run/ 2>/dev/null || true
+cp "$RUN/raw/mobile.mov" remotion/public/run/ 2>/dev/null || true
+cp "$RUN"/vo/*.wav remotion/public/run/vo/ 2>/dev/null || true
+cp "$RUN/events/web.events.json" remotion/src/edit/web.events.json
+cp "$RUN/events/mobile.events.json" remotion/src/edit/mobile.events.json 2>/dev/null || true
+cp "$RUN/vo/manifest.json" remotion/src/edit/vo-manifest.json
+LOGO="$(get brandLogo)"; [ -n "$LOGO" ] && [ -f "$LOGO" ] && cp "$LOGO" remotion/public/brand/logo-white.png || true
+[ "${MUSIC:-0}" = "1" ] && .venv/bin/python pipeline/gen_music.py remotion/public/run/music.wav || true
+
+echo "== 5/5 render =="
+( cd remotion && ./node_modules/.bin/remotion render Edit     "../$RUN/final/demo-final.mp4"   --image-format=jpeg )
+( cd remotion && ./node_modules/.bin/remotion render EditMute "../$RUN/edited/demo-edited.mp4" --image-format=jpeg )
+echo "✅ DONE -> $RUN/final/demo-final.mp4"

package/template/remotion/package.json

@@ -0,0 +1,16 @@
+{
+    "name": "lng-demo-remotion",
+    "version": "1.0.0",
+    "private": true,
+    "scripts": {
+        "render": "remotion render Demo out/demo.mp4 --image-format=jpeg",
+        "studio": "remotion studio"
+    },
+    "dependencies": {
+        "@remotion/cli": "^4.0.0",
+        "@remotion/google-fonts": "^4.0.0",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "remotion": "^4.0.0"
+    }
+}

package/template/remotion/remotion.config.ts

@@ -0,0 +1,5 @@
+import { Config } from '@remotion/cli/config';
+
+Config.setVideoImageFormat('jpeg');
+Config.setOverwriteOutput(true);
+Config.setConcurrency(4);

package/template/remotion/src/DemoVideo.tsx

@@ -0,0 +1,18 @@
+import type React from 'react';
+import { AbsoluteFill, Series } from 'remotion';
+import { SCENES, BRAND } from './scenes';
+import { Scene } from './Scene';
+
+export const DemoVideo: React.FC = () => {
+    return (
+        <AbsoluteFill style={{ background: BRAND.darker }}>
+            <Series>
+                {SCENES.map((s) => (
+                    <Series.Sequence key={s.id} durationInFrames={s.durF}>
+                        <Scene s={s} />
+                    </Series.Sequence>
+                ))}
+            </Series>
+        </AbsoluteFill>
+    );
+};

package/template/remotion/src/Root.tsx

@@ -0,0 +1,47 @@
+import type React from 'react';
+import { Composition } from 'remotion';
+import { DemoVideo } from './DemoVideo';
+import { FPS, TOTAL_FRAMES } from './scenes';
+import { EditVideo, TOTAL_EDIT } from './edit/EditVideo';
+
+export const RemotionRoot: React.FC = () => {
+    return (
+        <>
+            {/* OpenScreen-style edit of the real recordings (with VO) */}
+            <Composition
+                id="Edit"
+                component={EditVideo}
+                durationInFrames={TOTAL_EDIT}
+                fps={FPS}
+                width={1920}
+                height={1080}
+                defaultProps={{
+                    withVo: true,
+                    framed: false,
+                    music: false,
+                    cursorTight: false,
+                    mobileSync: false,
+                }}
+            />
+            {/* Edited recording, no voice-over (visual edit only) */}
+            <Composition
+                id="EditMute"
+                component={EditVideo}
+                durationInFrames={TOTAL_EDIT}
+                fps={FPS}
+                width={1920}
+                height={1080}
+                defaultProps={{ withVo: false }}
+            />
+            {/* legacy screenshot slideshow */}
+            <Composition
+                id="Demo"
+                component={DemoVideo}
+                durationInFrames={TOTAL_FRAMES}
+                fps={FPS}
+                width={1920}
+                height={1080}
+            />
+        </>
+    );
+};

package/template/remotion/src/Scene.tsx

@@ -0,0 +1,131 @@
+import type React from 'react';
+import {
+    AbsoluteFill,
+    Img,
+    Audio,
+    Sequence,
+    staticFile,
+    interpolate,
+    useCurrentFrame,
+} from 'remotion';
+import { BRAND, type Focus, type SceneDef } from './scenes';
+import { Caption, LabelChip, TitleCard, Vignette, useFade } from './ui';
+
+const FocalImage: React.FC<{ src: string; focus: Focus; durF: number }> = ({
+    src,
+    focus,
+    durF,
+}) => {
+    const frame = useCurrentFrame();
+    const p = durF > 0 ? frame / durF : 0;
+    const ox = focus.to ? interpolate(p, [0, 1], [focus.x, focus.to.x]) : focus.x;
+    const oy = focus.to ? interpolate(p, [0, 1], [focus.y, focus.to.y]) : focus.y;
+    const zoom = interpolate(p, [0, 1], [focus.zoom * 0.97, focus.zoom * 1.05]);
+    return (
+        <Img
+            src={staticFile('shots/' + src)}
+            style={{
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+                transform: `scale(${zoom})`,
+                transformOrigin: `${ox * 100}% ${oy * 100}%`,
+            }}
+        />
+    );
+};
+
+const Vo: React.FC<{ vo: string }> = ({ vo }) => (
+    <Sequence from={10}>
+        <Audio src={staticFile('vo/' + vo + '.wav')} volume={1} />
+    </Sequence>
+);
+
+const WebScene: React.FC<{ s: SceneDef }> = ({ s }) => {
+    const opacity = useFade(s.durF);
+    return (
+        <AbsoluteFill style={{ background: BRAND.darker, opacity }}>
+            <AbsoluteFill style={{ overflow: 'hidden' }}>
+                <FocalImage src={s.img!} focus={s.focus!} durF={s.durF} />
+            </AbsoluteFill>
+            <Vignette />
+            {s.label && <LabelChip text={s.label} />}
+            {s.caption && <Caption text={s.caption} />}
+            <Vo vo={s.vo} />
+        </AbsoluteFill>
+    );
+};
+
+const MobileScene: React.FC<{ s: SceneDef }> = ({ s }) => {
+    const opacity = useFade(s.durF);
+    const FRAME_H = 1000;
+    const FRAME_W = Math.round(FRAME_H * (1206 / 2622)); // keep phone aspect
+    return (
+        <AbsoluteFill style={{ background: BRAND.darker, opacity }}>
+            {/* ambient blurred backdrop from same shot */}
+            <AbsoluteFill>
+                <Img
+                    src={staticFile('shots/' + s.img!)}
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                        filter: 'blur(60px) brightness(0.35)',
+                        transform: 'scale(1.2)',
+                    }}
+                />
+            </AbsoluteFill>
+            <AbsoluteFill
+                style={{
+                    background:
+                        'radial-gradient(900px 600px at 50% 45%, rgba(7,11,20,0.2), rgba(7,11,20,0.78))',
+                }}
+            />
+            {/* phone */}
+            <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
+                <div
+                    style={{
+                        width: FRAME_W + 24,
+                        height: FRAME_H + 24,
+                        background: '#05070C',
+                        borderRadius: 60,
+                        padding: 12,
+                        boxShadow: '0 40px 90px rgba(0,0,0,0.6)',
+                        border: '1px solid rgba(255,255,255,0.08)',
+                    }}
+                >
+                    <div
+                        style={{
+                            width: FRAME_W,
+                            height: FRAME_H,
+                            borderRadius: 48,
+                            overflow: 'hidden',
+                            background: '#000',
+                        }}
+                    >
+                        <FocalImage src={s.img!} focus={s.focus!} durF={s.durF} />
+                    </div>
+                </div>
+            </AbsoluteFill>
+            {s.label && <LabelChip text={s.label} />}
+            {s.caption && <Caption text={s.caption} />}
+            <Vo vo={s.vo} />
+        </AbsoluteFill>
+    );
+};
+
+const TitleScene: React.FC<{ s: SceneDef }> = ({ s }) => {
+    const opacity = useFade(s.durF, 14, 14);
+    return (
+        <AbsoluteFill style={{ opacity }}>
+            <TitleCard title={s.title!} subtitle={s.subtitle!} />
+            <Vo vo={s.vo} />
+        </AbsoluteFill>
+    );
+};
+
+export const Scene: React.FC<{ s: SceneDef }> = ({ s }) => {
+    if (s.kind === 'title') return <TitleScene s={s} />;
+    if (s.kind === 'mobile') return <MobileScene s={s} />;
+    return <WebScene s={s} />;
+};

package/template/remotion/src/edit/Cursor.tsx

@@ -0,0 +1,83 @@
+import type React from 'react';
+import { useCurrentFrame, useVideoConfig } from 'remotion';
+
+// macOS-style arrow cursor, kept at constant screen size (scaled by 1/camScale)
+export const Cursor: React.FC<{ x: number; y: number; camScale: number }> = ({
+    x,
+    y,
+    camScale,
+}) => (
+    <div
+        style={{
+            position: 'absolute',
+            left: x,
+            top: y,
+            transform: `scale(${1 / camScale})`,
+            transformOrigin: '0 0',
+            pointerEvents: 'none',
+            zIndex: 50,
+        }}
+    >
+        <svg
+            width="32"
+            height="32"
+            viewBox="0 0 24 24"
+            style={{ filter: 'drop-shadow(0 2px 3px rgba(0,0,0,0.5))' }}
+        >
+            <path
+                d="M5 2 L5 19 L9.5 15 L12.5 21.5 L15 20.3 L12 14 L18 14 Z"
+                fill="white"
+                stroke="#111"
+                strokeWidth="1.2"
+                strokeLinejoin="round"
+            />
+        </svg>
+    </div>
+);
+
+export const Ripples: React.FC<{
+    clicks: { t: number; x: number; y: number }[];
+    camScale: number;
+}> = ({ clicks, camScale }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const t = frame / fps;
+    return (
+        <>
+            {clicks.map((c, i) => {
+                const dt = t - c.t;
+                if (dt < 0 || dt > 0.55) return null;
+                const p = dt / 0.55;
+                const r = (16 + p * 46) / camScale;
+                const o = (1 - p) * 0.55;
+                return (
+                    <div
+                        key={i}
+                        style={{
+                            position: 'absolute',
+                            left: c.x,
+                            top: c.y,
+                            width: 0,
+                            height: 0,
+                            pointerEvents: 'none',
+                            zIndex: 49,
+                        }}
+                    >
+                        <div
+                            style={{
+                                position: 'absolute',
+                                left: -r,
+                                top: -r,
+                                width: r * 2,
+                                height: r * 2,
+                                borderRadius: '50%',
+                                border: `${3 / camScale}px solid rgba(228,0,43,${o})`,
+                                boxShadow: `0 0 ${12 / camScale}px rgba(228,0,43,${o})`,
+                            }}
+                        />
+                    </div>
+                );
+            })}
+        </>
+    );
+};

package/template/remotion/src/edit/EditVideo.tsx

@@ -0,0 +1,68 @@
+import type React from 'react';
+import { AbsoluteFill, Series, Audio, Sequence, staticFile, useVideoConfig } from 'remotion';
+import { BRAND } from '../scenes';
+import { TitleCard } from '../ui';
+import { WebSegment, MobileSegment } from './segments';
+import { INTRO_DUR, WEB_DUR, MOBILE_DUR, OUTRO_DUR, FPS } from './data';
+
+export const TOTAL_EDIT = Math.round((INTRO_DUR + WEB_DUR + MOBILE_DUR + OUTRO_DUR) * FPS);
+
+const TitleSeg: React.FC<{ subtitle: string; vo: string; withVo: boolean }> = ({
+    subtitle,
+    vo,
+    withVo,
+}) => (
+    <AbsoluteFill>
+        <TitleCard title="LOAD & GO" subtitle={subtitle} />
+        {withVo && (
+            <Sequence from={6}>
+                <Audio src={staticFile('run/vo/' + vo + '.wav')} />
+            </Sequence>
+        )}
+    </AbsoluteFill>
+);
+
+export type EditProps = {
+    withVo?: boolean;
+    framed?: boolean;
+    music?: boolean;
+    cursorTight?: boolean;
+    mobileSync?: boolean;
+};
+
+export const EditVideo: React.FC<EditProps> = ({
+    withVo = true,
+    framed = false,
+    music = false,
+    cursorTight = false,
+    mobileSync = false,
+}) => {
+    const { fps } = useVideoConfig();
+    return (
+        <AbsoluteFill style={{ background: BRAND.darker }}>
+            {music && <Audio src={staticFile('run/music.wav')} volume={0.5} loop />}
+            <Series>
+                <Series.Sequence durationInFrames={Math.round(INTRO_DUR * fps)}>
+                    <TitleSeg subtitle="From dispatch to delivery" vo="s0_intro" withVo={withVo} />
+                </Series.Sequence>
+                <Series.Sequence durationInFrames={Math.round(WEB_DUR * fps)}>
+                    <WebSegment
+                        withVo={withVo}
+                        framed={framed}
+                        cursorRate={cursorTight ? 1.12 : 1}
+                    />
+                </Series.Sequence>
+                <Series.Sequence durationInFrames={Math.round(MOBILE_DUR * fps)}>
+                    <MobileSegment withVo={withVo} sync={mobileSync} />
+                </Series.Sequence>
+                <Series.Sequence durationInFrames={Math.round(OUTRO_DUR * fps)}>
+                    <TitleSeg
+                        subtitle="One platform, dispatch to delivery"
+                        vo="s8_outro"
+                        withVo={withVo}
+                    />
+                </Series.Sequence>
+            </Series>
+        </AbsoluteFill>
+    );
+};

package/template/remotion/src/edit/data.ts

@@ -0,0 +1,134 @@
+// Event-driven edit data — camera/cursor/clicks DERIVED from the capture events
+// (so the camera tracks the grid's own horizontal scroll automatically).
+import web from './web.events.json';
+import mob from './mobile.events.json';
+import voman from './vo-manifest.json';
+
+export const FPS = 30;
+
+// sequence beats so voice-overs never overlap: each starts no earlier than the previous ends
+export type Beat = { start: number; dur: number; vo: string; cap: string };
+function seq(raw: { at: number; vo: string; cap: string }[]): Beat[] {
+    const out: Beat[] = [];
+    let prevEnd = 0;
+    for (const b of raw) {
+        const dur = (voman as any)[b.vo]?.dur ?? 3;
+        const start = Math.max(b.at, prevEnd + 0.15);
+        out.push({ start, dur, vo: b.vo, cap: b.cap });
+        prevEnd = start + dur;
+    }
+    return out;
+}
+export const WEB_W = web.w as number;
+export const WEB_H = web.h as number;
+export const WEB_OFFSET = web.video_offset as number;
+
+export function kf(t: number, ts: number[], vs: number[]): number {
+    if (t <= ts[0]) return vs[0];
+    if (t >= ts[ts.length - 1]) return vs[vs.length - 1];
+    let i = 0;
+    while (i < ts.length - 1 && t > ts[i + 1]) i++;
+    const span = ts[i + 1] - ts[i] || 1;
+    const p = (t - ts[i]) / span;
+    const sp = p * p * (3 - 2 * p); // smoothstep ease
+    return vs[i] + (vs[i + 1] - vs[i]) * sp;
+}
+
+type Ev = { t: number; kind: string; x: number | null; y: number | null; label: string; box: any };
+
+// Phase-based camera: hold a region per "scene" phase (robust to A/V drift),
+// while the cursor still follows each individual action.
+function buildWeb() {
+    const evs = web.events as Ev[];
+    const scenes = evs.filter((e) => e.kind === 'scene');
+    const actions = evs.filter((e) => e.x != null && e.y != null);
+    const lastActT = actions[actions.length - 1].t;
+    const phases = scenes.map((s, i) => ({
+        t0: s.t,
+        t1: i + 1 < scenes.length ? scenes[i + 1].t : lastActT + 1.0,
+    }));
+
+    const camT = [0],
+        camS = [1.08],
+        camX = [WEB_W / 2],
+        camY = [WEB_H / 2];
+    for (const ph of phases) {
+        const acts = actions.filter((a) => a.t >= ph.t0 - 0.05 && a.t < ph.t1);
+        if (!acts.length) continue;
+        let x0 = 1e9,
+            y0 = 1e9,
+            x1 = -1e9,
+            y1 = -1e9;
+        for (const a of acts) {
+            const b = a.box || { x: (a.x as number) - 90, y: (a.y as number) - 20, w: 180, h: 40 };
+            x0 = Math.min(x0, b.x);
+            y0 = Math.min(y0, b.y);
+            x1 = Math.max(x1, b.x + b.w);
+            y1 = Math.max(y1, b.y + b.h);
+        }
+        const cx = (x0 + x1) / 2,
+            cy = (y0 + y1) / 2;
+        const bw = Math.max(1, x1 - x0),
+            bh = Math.max(1, y1 - y0);
+        const s = Math.min(1.95, Math.max(1.3, Math.min((WEB_W * 0.6) / bw, (WEB_H * 0.6) / bh)));
+        camT.push(ph.t0 + 0.6);
+        camS.push(s);
+        camX.push(cx);
+        camY.push(cy);
+        camT.push(ph.t1 - 0.2);
+        camS.push(s);
+        camX.push(cx);
+        camY.push(cy);
+    }
+
+    // cursor HOLDS at each field (during typing), then snaps to the next just before it acts
+    const curT = [0],
+        curX = [WEB_W / 2],
+        curY = [320];
+    const clicks: { t: number; x: number; y: number }[] = [];
+    for (let i = 0; i < actions.length; i++) {
+        const a = actions[i];
+        curT.push(a.t);
+        curX.push(a.x as number);
+        curY.push(a.y as number);
+        if (a.kind === 'click') clicks.push({ t: a.t, x: a.x as number, y: a.y as number });
+        const next = actions[i + 1];
+        if (next) {
+            const hold = Math.max(a.t + 0.05, next.t - 0.4);
+            curT.push(hold);
+            curX.push(a.x as number);
+            curY.push(a.y as number);
+        }
+    }
+    const dur = phases[phases.length - 1].t1 + 2.2;
+    return { camT, camS, camX, camY, curT, curX, curY, clicks, dur };
+}
+
+export const WEB = buildWeb();
+export const WEB_DUR = WEB.dur;
+
+export const WEB_BEATS = seq([
+    { at: 0.3, vo: 's1_daysheet', cap: 'The Day Sheet — every job in one grid' },
+    { at: 4.2, vo: 's2_create', cap: 'Add a job inline — address lookup as you type' },
+    { at: 12.9, vo: 's3_details', cap: 'Site contacts & job details, in the row' },
+    { at: 18.4, vo: 's4_crew', cap: 'Allocate the crew — driver & truck' },
+    { at: 25.1, vo: 's5_publish', cap: 'Publish — sent to the driver’s phone' },
+]);
+
+export const MOBILE_DUR = 10.0;
+export const MOBILE_W = mob.w as number;
+export const MOBILE_H = mob.h as number;
+export const MOBILE_BEATS = seq([
+    { at: 0.8, vo: 's6_push', cap: 'On the truck — an instant notification' },
+    { at: 4.8, vo: 's7_jobdet', cap: 'The full job: pickup, delivery, load, contacts' },
+]);
+// event-driven mobile camera (banner -> pull out -> job details), in 1206x2622 coords
+export const MOBILE_CAM = {
+    T: [0, 1.3, 4.0, 5.6, 8.0, MOBILE_DUR],
+    S: [1.0, 1.55, 1.55, 1.0, 1.16, 1.16],
+    X: [603, 603, 603, 603, 603, 603],
+    Y: [760, 250, 250, 1120, 1280, 1280],
+};
+
+export const INTRO_DUR = 3.0;
+export const OUTRO_DUR = 3.6;

package/template/remotion/src/edit/mobile.events.json

@@ -0,0 +1,11 @@
+{
+    "video": "raw/mobile.mov",
+    "w": 1206,
+    "h": 2622,
+    "events": [
+        { "t": 0.0, "kind": "scene", "label": "home" },
+        { "t": 1.2, "kind": "notify", "x": 603, "y": 150, "label": "push banner" },
+        { "t": 5.0, "kind": "scene", "label": "open" },
+        { "t": 8.0, "kind": "scene", "label": "jobdetails" }
+    ]
+}