@xcelsior/demo-pipeline 0.1.0

package/template/remotion/src/ui.tsx

@@ -0,0 +1,161 @@
+import type React from 'react';
+import {
+    AbsoluteFill,
+    Img,
+    staticFile,
+    interpolate,
+    useCurrentFrame,
+    spring,
+    useVideoConfig,
+} from 'remotion';
+import { loadFont } from '@remotion/google-fonts/Inter';
+import { BRAND } from './scenes';
+
+const { fontFamily } = loadFont();
+export const FONT = fontFamily;
+
+// Fade helper: fade in over `inF` frames, hold, fade out over last `outF`
+export const useFade = (durF: number, inF = 12, outF = 12) => {
+    const frame = useCurrentFrame();
+    return interpolate(frame, [0, inF, durF - outF, durF], [0, 1, 1, 0], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+    });
+};
+
+export const Vignette: React.FC = () => (
+    <AbsoluteFill
+        style={{
+            background:
+                'radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%)',
+            pointerEvents: 'none',
+        }}
+    />
+);
+
+export const LabelChip: React.FC<{ text: string }> = ({ text }) => {
+    const frame = useCurrentFrame();
+    const x = interpolate(frame, [4, 18], [-30, 0], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+    });
+    const o = interpolate(frame, [4, 18], [0, 1], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+    });
+    return (
+        <div
+            style={{
+                position: 'absolute',
+                top: 54,
+                left: 64,
+                transform: `translateX(${x}px)`,
+                opacity: o,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 12,
+                background: 'rgba(11,18,32,0.72)',
+                border: '1px solid rgba(255,255,255,0.10)',
+                backdropFilter: 'blur(6px)',
+                padding: '12px 20px',
+                borderRadius: 999,
+                fontFamily: FONT,
+                color: BRAND.text,
+                fontSize: 26,
+                fontWeight: 600,
+                letterSpacing: 0.3,
+            }}
+        >
+            <span
+                style={{
+                    width: 12,
+                    height: 12,
+                    borderRadius: 99,
+                    background: BRAND.red,
+                    boxShadow: `0 0 14px ${BRAND.red}`,
+                }}
+            />
+            {text}
+        </div>
+    );
+};
+
+export const Caption: React.FC<{ text: string }> = ({ text }) => {
+    const frame = useCurrentFrame();
+    const y = interpolate(frame, [8, 24], [26, 0], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+    });
+    const o = interpolate(frame, [8, 24], [0, 1], {
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+    });
+    return (
+        <div
+            style={{
+                position: 'absolute',
+                bottom: 70,
+                left: 0,
+                right: 0,
+                display: 'flex',
+                justifyContent: 'center',
+                transform: `translateY(${y}px)`,
+                opacity: o,
+            }}
+        >
+            <div
+                style={{
+                    maxWidth: 1400,
+                    textAlign: 'center',
+                    background: 'linear-gradient(180deg, rgba(11,18,32,0.78), rgba(7,11,20,0.86))',
+                    border: '1px solid rgba(255,255,255,0.10)',
+                    borderRadius: 18,
+                    padding: '18px 38px',
+                    fontFamily: FONT,
+                    color: BRAND.text,
+                    fontSize: 38,
+                    fontWeight: 600,
+                    boxShadow: '0 18px 50px rgba(0,0,0,0.45)',
+                }}
+            >
+                {text}
+            </div>
+        </div>
+    );
+};
+
+export const TitleCard: React.FC<{ title: string; subtitle: string }> = ({ title, subtitle }) => {
+    const frame = useCurrentFrame();
+    const { fps } = useVideoConfig();
+    const s = spring({ frame, fps, config: { damping: 200 } });
+    const scale = interpolate(s, [0, 1], [0.92, 1]);
+    const o = interpolate(frame, [0, 18], [0, 1], { extrapolateRight: 'clamp' });
+    return (
+        <AbsoluteFill
+            style={{
+                background: `radial-gradient(1200px 700px at 50% 38%, ${BRAND.panel} 0%, ${BRAND.dark} 55%, ${BRAND.darker} 100%)`,
+                justifyContent: 'center',
+                alignItems: 'center',
+                fontFamily: FONT,
+            }}
+        >
+            <div style={{ transform: `scale(${scale})`, opacity: o, textAlign: 'center' }}>
+                <Img
+                    src={staticFile('brand/logo-white.png')}
+                    style={{ width: 640, height: 'auto' }}
+                />
+                <div
+                    style={{
+                        marginTop: 30,
+                        fontSize: 40,
+                        fontWeight: 500,
+                        color: BRAND.sub,
+                        letterSpacing: 1,
+                    }}
+                >
+                    {subtitle}
+                </div>
+            </div>
+        </AbsoluteFill>
+    );
+};

package/template/remotion/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "jsx": "react-jsx",
+        "strict": false,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "lib": ["ES2020", "DOM"]
+    },
+    "include": ["src"]
+}

package/template/setup.sh

@@ -0,0 +1,29 @@
+#!/usr/bin/env bash
+# One-time setup for the demo-pipeline on a fresh machine.
+set -euo pipefail
+cd "$(dirname "$0")"
+
+echo "[1/5] uv (Python toolchain)"
+command -v uv >/dev/null || brew install uv
+
+echo "[2/5] Python venv + capture/VO deps"
+uv venv --python 3.12 .venv >/dev/null
+uv pip install --python .venv playwright soundfile kokoro-onnx numpy >/dev/null
+
+echo "[3/5] Playwright Chromium (records the web)"
+.venv/bin/python -m playwright install chromium >/dev/null
+
+echo "[4/5] Kokoro voice model (~310MB, once)"
+mkdir -p models
+BASE=https://github.com/thewh1teagle/kokoro-onnx/releases/download/model-files-v1.0
+[ -f models/kokoro.onnx ] || curl -fsSL -o models/kokoro.onnx "$BASE/kokoro-v1.0.onnx"
+[ -f models/voices.bin ]  || curl -fsSL -o models/voices.bin  "$BASE/voices-v1.0.bin"
+
+echo "[5/5] Remotion deps (the editor)"
+( cd remotion && pnpm install >/dev/null )
+
+command -v maestro >/dev/null || echo "  (mobile only) install Maestro: curl -fsSL https://get.maestro.mobile.dev | bash"
+echo ""
+echo "✅ demo-pipeline ready."
+echo "   Run a full demo:  pnpm --dir tools/demo-pipeline demo:all"
+echo "   Or in Claude:     /demo-video"