@xcelsior/demo-pipeline 0.1.0

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

@@ -0,0 +1,268 @@
+import React from 'react';
+import {
+    AbsoluteFill,
+    OffthreadVideo,
+    Audio,
+    Sequence,
+    staticFile,
+    useCurrentFrame,
+    useVideoConfig,
+    interpolate,
+} from 'remotion';
+import { BRAND } from '../scenes';
+import { FONT } from '../ui';
+import { Cursor, Ripples } from './Cursor';
+import {
+    WEB_OFFSET,
+    WEB_W,
+    WEB_H,
+    WEB,
+    WEB_BEATS,
+    MOBILE_BEATS,
+    MOBILE_DUR,
+    MOBILE_CAM,
+    kf,
+} from './data';
+
+const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v));
+
+const BeatCaption: React.FC<{ text: string; start: number; dur: number }> = ({
+    text,
+    start,
+    dur,
+}) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const f = frame - start * fps;
+    const D = dur * fps;
+    if (f < 0 || f > D) return null;
+    const o = interpolate(f, [0, 10, D - 12, D], [0, 1, 1, 0], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+    });
+    const y = interpolate(f, [0, 12], [20, 0], { extrapolateRight: 'clamp' });
+    return (
+        <div
+            style={{
+                position: 'absolute',
+                bottom: 56,
+                left: 0,
+                right: 0,
+                display: 'flex',
+                justifyContent: 'center',
+                opacity: o,
+                transform: `translateY(${y}px)`,
+                zIndex: 60,
+            }}
+        >
+            <div
+                style={{
+                    background: 'linear-gradient(180deg, rgba(11,18,32,0.82), rgba(7,11,20,0.9))',
+                    border: '1px solid rgba(255,255,255,0.10)',
+                    borderRadius: 16,
+                    padding: '16px 34px',
+                    fontFamily: FONT,
+                    color: BRAND.text,
+                    fontSize: 36,
+                    fontWeight: 600,
+                    boxShadow: '0 16px 44px rgba(0,0,0,0.5)',
+                }}
+            >
+                {text}
+            </div>
+        </div>
+    );
+};
+
+const Beats: React.FC<{
+    beats: { start: number; dur: number; vo: string; cap: string }[];
+    withVo: boolean;
+}> = ({ beats, withVo }) => {
+    const { fps } = useVideoConfig();
+    return (
+        <>
+            {beats.map((b, i) => (
+                <React.Fragment key={i}>
+                    <BeatCaption text={b.cap} start={b.start} dur={b.dur} />
+                    {withVo && (
+                        <Sequence from={Math.round(b.start * fps)}>
+                            <Audio src={staticFile('run/vo/' + b.vo + '.wav')} />
+                        </Sequence>
+                    )}
+                </React.Fragment>
+            ))}
+        </>
+    );
+};
+
+export const WebSegment: React.FC<{ withVo: boolean; framed?: boolean; cursorRate?: number }> = ({
+    withVo,
+    framed = false,
+    cursorRate = 1,
+}) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const t = frame / fps;
+    const s = kf(t, WEB.camT, WEB.camS);
+    const cx = kf(t, WEB.camT, WEB.camX);
+    const cy = kf(t, WEB.camT, WEB.camY);
+    const tx = clamp(WEB_W / 2 - cx * s, WEB_W - WEB_W * s, 0);
+    const ty = clamp(WEB_H / 2 - cy * s, WEB_H - WEB_H * s, 0);
+    const ct = t / cursorRate;
+    const cux = kf(ct, WEB.curT, WEB.curX);
+    const cuy = kf(ct, WEB.curT, WEB.curY);
+    const clicks =
+        cursorRate === 1 ? WEB.clicks : WEB.clicks.map((c) => ({ ...c, t: c.t * cursorRate }));
+    const videoLayer = (
+        <div
+            style={{
+                position: 'absolute',
+                width: WEB_W,
+                height: WEB_H,
+                transform: `translate(${tx}px, ${ty}px) scale(${s})`,
+                transformOrigin: '0 0',
+            }}
+        >
+            <OffthreadVideo
+                src={staticFile('run/web.webm')}
+                trimBefore={Math.round(WEB_OFFSET * fps)}
+                muted
+                style={{ width: WEB_W, height: WEB_H }}
+            />
+            <Ripples clicks={clicks} camScale={s} />
+            <Cursor x={cux} y={cuy} camScale={s} />
+        </div>
+    );
+    if (framed) {
+        const k = 0.84;
+        const IW = WEB_W * k,
+            IH = WEB_H * k;
+        return (
+            <AbsoluteFill
+                style={{
+                    background: 'linear-gradient(135deg, #1c2c4d 0%, #0c1322 55%, #0a0f1a 100%)',
+                }}
+            >
+                <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
+                    <div
+                        style={{
+                            width: IW,
+                            height: IH,
+                            borderRadius: 22,
+                            overflow: 'hidden',
+                            boxShadow: '0 50px 120px rgba(0,0,0,0.55)',
+                            border: '1px solid rgba(255,255,255,0.10)',
+                            position: 'relative',
+                        }}
+                    >
+                        <div
+                            style={{
+                                position: 'absolute',
+                                width: WEB_W,
+                                height: WEB_H,
+                                transform: `scale(${k})`,
+                                transformOrigin: '0 0',
+                            }}
+                        >
+                            {videoLayer}
+                        </div>
+                    </div>
+                </AbsoluteFill>
+                <Beats beats={WEB_BEATS} withVo={withVo} />
+            </AbsoluteFill>
+        );
+    }
+    return (
+        <AbsoluteFill style={{ background: '#05070C' }}>
+            <AbsoluteFill style={{ overflow: 'hidden' }}>{videoLayer}</AbsoluteFill>
+            <Beats beats={WEB_BEATS} withVo={withVo} />
+        </AbsoluteFill>
+    );
+};
+
+export const MobileSegment: React.FC<{ withVo: boolean; sync?: boolean }> = ({
+    withVo,
+    sync = false,
+}) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const t = frame / fps;
+    const FRAME_H = 1010;
+    const FRAME_W = Math.round(FRAME_H * (1206 / 2622));
+    const k = FRAME_H / 2622;
+    let s: number, cx: number, cy: number;
+    if (sync) {
+        s = kf(t, MOBILE_CAM.T, MOBILE_CAM.S);
+        cx = kf(t, MOBILE_CAM.T, MOBILE_CAM.X);
+        cy = kf(t, MOBILE_CAM.T, MOBILE_CAM.Y);
+    } else {
+        s = interpolate(t, [0, MOBILE_DUR], [1.02, 1.08], { extrapolateRight: 'clamp' });
+        cx = 603;
+        cy = 1311;
+    }
+    const tx = clamp(FRAME_W / 2 - cx * k * s, FRAME_W - FRAME_W * s, 0);
+    const ty = clamp(FRAME_H / 2 - cy * k * s, FRAME_H - FRAME_H * s, 0);
+    return (
+        <AbsoluteFill style={{ background: BRAND.darker }}>
+            <AbsoluteFill>
+                <OffthreadVideo
+                    src={staticFile('run/mobile.mov')}
+                    muted
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                        filter: 'blur(70px) brightness(0.3)',
+                        transform: 'scale(1.2)',
+                    }}
+                />
+            </AbsoluteFill>
+            <AbsoluteFill
+                style={{
+                    background:
+                        'radial-gradient(900px 700px at 50% 45%, rgba(7,11,20,0.15), rgba(7,11,20,0.8))',
+                }}
+            />
+            <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
+                <div
+                    style={{
+                        width: FRAME_W + 22,
+                        height: FRAME_H + 22,
+                        background: '#05070C',
+                        borderRadius: 56,
+                        padding: 11,
+                        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: 46,
+                            overflow: 'hidden',
+                            background: '#000',
+                        }}
+                    >
+                        <div
+                            style={{
+                                position: 'absolute',
+                                width: FRAME_W,
+                                height: FRAME_H,
+                                transform: `translate(${tx}px, ${ty}px) scale(${s})`,
+                                transformOrigin: '0 0',
+                            }}
+                        >
+                            <OffthreadVideo
+                                src={staticFile('run/mobile.mov')}
+                                muted
+                                style={{ width: FRAME_W, height: FRAME_H, objectFit: 'cover' }}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </AbsoluteFill>
+            <Beats beats={MOBILE_BEATS} withVo={withVo} />
+        </AbsoluteFill>
+    );
+};

package/template/remotion/src/edit/vo-manifest.json

@@ -0,0 +1,38 @@
+{
+    "s0_intro": {
+        "text": "Load and Go. From dispatch, to delivery.",
+        "dur": 2.475
+    },
+    "s1_daysheet": {
+        "text": "It starts on the Day Sheet. Every job for the day, in one grid.",
+        "dur": 3.669
+    },
+    "s2_create": {
+        "text": "Add a job inline. Customer, loading time, pickup and delivery, with address lookup as you type.",
+        "dur": 5.867
+    },
+    "s3_details": {
+        "text": "Site contacts and job details, right in the row.",
+        "dur": 2.987
+    },
+    "s4_crew": {
+        "text": "Allocate the crew. Driver and truck, straight from the row.",
+        "dur": 3.243
+    },
+    "s5_publish": {
+        "text": "Publish, and it goes straight to the driver's phone.",
+        "dur": 2.517
+    },
+    "s6_push": {
+        "text": "On the truck, an instant notification. A new job.",
+        "dur": 3.072
+    },
+    "s7_jobdet": {
+        "text": "They open it to the full picture. Pickup, delivery, load, and contacts.",
+        "dur": 4.267
+    },
+    "s8_outro": {
+        "text": "Load and Go. One platform, from dispatch to delivery.",
+        "dur": 3.413
+    }
+}

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

@@ -0,0 +1,274 @@
+{
+    "video": "raw/web.webm",
+    "w": 1920,
+    "h": 1080,
+    "video_offset": 8.022,
+    "events": [
+        {
+            "t": 0.0,
+            "kind": "scene",
+            "x": null,
+            "y": null,
+            "label": "daysheet",
+            "box": null
+        },
+        {
+            "t": 0.812,
+            "kind": "move",
+            "x": 633,
+            "y": 425,
+            "label": "Customer",
+            "box": {
+                "x": 533,
+                "y": 408,
+                "w": 200,
+                "h": 34
+            }
+        },
+        {
+            "t": 0.885,
+            "kind": "click",
+            "x": 633,
+            "y": 425,
+            "label": "open Customer",
+            "box": {
+                "x": 533,
+                "y": 408,
+                "w": 200,
+                "h": 34
+            }
+        },
+        {
+            "t": 3.748,
+            "kind": "move",
+            "x": 806,
+            "y": 426,
+            "label": "Loading Time",
+            "box": {
+                "x": 733,
+                "y": 408,
+                "w": 146,
+                "h": 36
+            }
+        },
+        {
+            "t": 3.803,
+            "kind": "click",
+            "x": 806,
+            "y": 426,
+            "label": "open Loading Time",
+            "box": {
+                "x": 733,
+                "y": 408,
+                "w": 146,
+                "h": 36
+            }
+        },
+        {
+            "t": 4.518,
+            "kind": "move",
+            "x": 990,
+            "y": 426,
+            "label": "Pickup",
+            "box": {
+                "x": 880,
+                "y": 408,
+                "w": 220,
+                "h": 36
+            }
+        },
+        {
+            "t": 4.603,
+            "kind": "click",
+            "x": 990,
+            "y": 426,
+            "label": "open Pickup",
+            "box": {
+                "x": 880,
+                "y": 408,
+                "w": 220,
+                "h": 36
+            }
+        },
+        {
+            "t": 8.688,
+            "kind": "move",
+            "x": 1363,
+            "y": 426,
+            "label": "Delivery",
+            "box": {
+                "x": 1253,
+                "y": 408,
+                "w": 220,
+                "h": 36
+            }
+        },
+        {
+            "t": 8.74,
+            "kind": "click",
+            "x": 1397,
+            "y": 426,
+            "label": "open Delivery",
+            "box": {
+                "x": 1287,
+                "y": 408,
+                "w": 220,
+                "h": 36
+            }
+        },
+        {
+            "t": 12.68,
+            "kind": "scene",
+            "x": null,
+            "y": null,
+            "label": "sitecontacts",
+            "box": null
+        },
+        {
+            "t": 12.683,
+            "kind": "click",
+            "x": 117,
+            "y": 426,
+            "label": "expand details",
+            "box": {
+                "x": 108,
+                "y": 417,
+                "w": 18,
+                "h": 18
+            }
+        },
+        {
+            "t": 13.417,
+            "kind": "move",
+            "x": 306,
+            "y": 690,
+            "label": "Pickup site contact",
+            "box": {
+                "x": 126,
+                "y": 673,
+                "w": 360,
+                "h": 34
+            }
+        },
+        {
+            "t": 15.448,
+            "kind": "move",
+            "x": 682,
+            "y": 690,
+            "label": "Delivery site contact",
+            "box": {
+                "x": 502,
+                "y": 673,
+                "w": 360,
+                "h": 34
+            }
+        },
+        {
+            "t": 18.163,
+            "kind": "scene",
+            "x": null,
+            "y": null,
+            "label": "crew",
+            "box": null
+        },
+        {
+            "t": 18.185,
+            "kind": "click",
+            "x": 1091,
+            "y": 426,
+            "label": "add crew",
+            "box": {
+                "x": 1078,
+                "y": 415,
+                "w": 26,
+                "h": 22
+            }
+        },
+        {
+            "t": 19.232,
+            "kind": "move",
+            "x": 1248,
+            "y": 567,
+            "label": "Driver",
+            "box": {
+                "x": 1091,
+                "y": 552,
+                "w": 314,
+                "h": 30
+            }
+        },
+        {
+            "t": 21.67,
+            "kind": "move",
+            "x": 1248,
+            "y": 623,
+            "label": "Truck",
+            "box": {
+                "x": 1091,
+                "y": 608,
+                "w": 314,
+                "h": 30
+            }
+        },
+        {
+            "t": 23.468,
+            "kind": "info",
+            "x": 1248,
+            "y": 623,
+            "label": "truck='BUNGA1'",
+            "box": {
+                "x": 1091,
+                "y": 608,
+                "w": 314,
+                "h": 30
+            }
+        },
+        {
+            "t": 23.476,
+            "kind": "click",
+            "x": 1362,
+            "y": 778,
+            "label": "save crew",
+            "box": {
+                "x": 1320,
+                "y": 762,
+                "w": 85,
+                "h": 32
+            }
+        },
+        {
+            "t": 25.004,
+            "kind": "scene",
+            "x": null,
+            "y": null,
+            "label": "publish",
+            "box": null
+        },
+        {
+            "t": 25.008,
+            "kind": "move",
+            "x": 1834,
+            "y": 192,
+            "label": "Publish day",
+            "box": {
+                "x": 1765,
+                "y": 172,
+                "w": 139,
+                "h": 40
+            }
+        },
+        {
+            "t": 25.056,
+            "kind": "click",
+            "x": 1834,
+            "y": 192,
+            "label": "publish",
+            "box": {
+                "x": 1765,
+                "y": 172,
+                "w": 139,
+                "h": 40
+            }
+        }
+    ]
+}

package/template/remotion/src/index.ts

@@ -0,0 +1,4 @@
+import { registerRoot } from 'remotion';
+import { RemotionRoot } from './Root';
+
+registerRoot(RemotionRoot);

package/template/remotion/src/scenes.ts

@@ -0,0 +1,111 @@
+export const FPS = 30;
+
+// Brand
+export const BRAND = {
+    red: '#E4002B',
+    dark: '#0B1220',
+    darker: '#070B14',
+    panel: '#111B2E',
+    text: '#F8FAFC',
+    sub: '#94A3B8',
+    accent: '#3B82F6',
+};
+
+export type Focus = { x: number; y: number; zoom: number; to?: { x: number; y: number } };
+
+export type SceneDef = {
+    id: string;
+    kind: 'title' | 'web' | 'mobile';
+    durF: number; // duration in frames
+    vo: string; // wav basename in public/vo
+    // title
+    title?: string;
+    subtitle?: string;
+    // shot
+    img?: string; // file in public/shots
+    label?: string; // top-left chip
+    caption?: string; // lower third
+    focus?: Focus;
+};
+
+// Durations derived from measured VO length + ~1s padding (30fps)
+export const SCENES: SceneDef[] = [
+    {
+        id: 'title',
+        kind: 'title',
+        durF: 138,
+        vo: 'scene0',
+        title: 'LOAD & GO',
+        subtitle: 'From dispatch to delivery',
+    },
+    {
+        id: 'daysheet',
+        kind: 'web',
+        durF: 159,
+        vo: 'scene1',
+        img: 'web1.png',
+        label: 'Day Sheet',
+        caption: 'Every job for the day, in one fast grid',
+        focus: { x: 0.5, y: 0.46, zoom: 1.14 },
+    },
+    {
+        id: 'create',
+        kind: 'web',
+        durF: 219,
+        vo: 'scene2',
+        img: 'web2.png',
+        label: 'Create a job · inline',
+        caption: 'Customer · time · pickup · delivery — lookup as you type',
+        focus: { x: 0.26, y: 0.37, zoom: 1.5, to: { x: 0.62, y: 0.37 } },
+    },
+    {
+        id: 'crew',
+        kind: 'web',
+        durF: 150,
+        vo: 'scene3',
+        img: 'web3.png',
+        label: 'Allocate crew',
+        caption: 'Driver · Truck · Trailer — from the row',
+        focus: { x: 0.82, y: 0.34, zoom: 1.5 },
+    },
+    {
+        id: 'publish',
+        kind: 'web',
+        durF: 132,
+        vo: 'scene4',
+        img: 'web4.png',
+        label: 'Publish the day',
+        caption: 'Sent straight to the driver’s phone',
+        focus: { x: 0.88, y: 0.16, zoom: 1.5 },
+    },
+    {
+        id: 'push',
+        kind: 'mobile',
+        durF: 150,
+        vo: 'scene5',
+        img: 'm1.png',
+        label: 'Driver app',
+        caption: 'Instant notification — a new job has landed',
+        focus: { x: 0.5, y: 0.11, zoom: 1.35 },
+    },
+    {
+        id: 'details',
+        kind: 'mobile',
+        durF: 270,
+        vo: 'scene6',
+        img: 'm2.png',
+        label: 'Job details',
+        caption: 'Pickup · delivery · load details · contacts',
+        focus: { x: 0.5, y: 0.26, zoom: 1.18, to: { x: 0.5, y: 0.6 } },
+    },
+    {
+        id: 'outro',
+        kind: 'title',
+        durF: 153,
+        vo: 'scene7',
+        title: 'LOAD & GO',
+        subtitle: 'One platform, dispatch to delivery',
+    },
+];
+
+export const TOTAL_FRAMES = SCENES.reduce((sum, s) => sum + s.durF, 0);