@mevdragon/vidfarm-devcli 0.7.0 → 0.8.0

package/dist/src/devcli/composition-edit.js

@@ -6,6 +6,9 @@
 // pushes them identically to a browser-made edit. Pure DOM (linkedom) — no
 // ffmpeg, no network.
 import { parseHTML } from "linkedom";
+const KEN_BURNS_PRESETS = new Set([
+    "zoom-in", "zoom-out", "pan-left", "pan-right", "pan-up", "pan-down", "zoom-in-left", "zoom-in-right"
+]);
 const round3 = (v) => Number(v.toFixed(3));
 const clampPercent = (v) => Math.min(100, Math.max(0, v));
 function serialize(document) {
@@ -209,6 +212,15 @@ function buildMediaClip(document, opts, id, track, geom) {
         node.setAttribute("data-playback-start", ps);
         styles.push("background:#050604");
     }
+    else if (opts.kenBurns && KEN_BURNS_PRESETS.has(opts.kenBurns)) {
+        // Ken Burns lives on the <img> itself (see src/hyperframes/composition.ts):
+        // data-kenburns picks the keyframes; the inline vars supply span + strength.
+        node.setAttribute("data-kenburns", opts.kenBurns);
+        styles.push(`--vf-kb-dur:${round3(geom.duration)}s`);
+        if (opts.kenBurnsIntensity !== undefined && Number.isFinite(opts.kenBurnsIntensity)) {
+            styles.push(`--vf-kb-amount:${Math.max(0.04, Math.min(0.5, opts.kenBurnsIntensity))}`);
+        }
+    }
     node.setAttribute("style", `${styles.join(";")};`);
     return node;
 }

package/dist/src/editor-chat.js

@@ -77,6 +77,7 @@ export function buildTemplateEditorChatSystemPrompt(input) {
         "If the composition brief's cast is absent or empty, or the referenced person is not in it, fall back to extracting a still yourself: call GET /api/v1/compositions/:forkId/remove-video-captions to pick the correct source video, then POST /api/v1/primitives/videos/extract-frame with source_video_url set to that URL and at_ms at a moment the person is clearly on screen (use video_context scene timings), then feed the returned image URL as generate_layer input_references (video) or prompt_attachments (image) exactly as above. Prefer the cast reference_url when present because it is already isolated from other people and reusable.",
         "When placing generated character media on the timeline, prefer generate_layer (it applies the placement rules for you): to drop the character into a blank moment use intent='fill_gap' with start/duration on a timeline_gaps span; to swap them into an existing scene use intent='replace_layer' with replace_layer_key (its timing and full-canvas geometry are copied automatically). Always set aspect_ratio to the canvas (e.g. 9:16 for vertical) so the clip fills the frame. Only when you already have a finished media URL should you fall back to add_layer with explicit collision-free start/duration and full-canvas geometry (x=0, y=0, width=100, height=100) for a timeline-proxy/full-canvas replacement.",
         "Use set_layer_visual for geometry (x, y, width, height in %, plus font_size and border_radius in px). Use set_layer_style for text/color styling (color, background, background_style plain|outline|highlight-solid|highlight-translucent, font_family, font_weight, italic, underline, text_align, border_radius, font_size). Use set_layer_media to swap src, volume, muted, playback_start, or object_fit on media layers. Use set_layer_timing for start, duration, track index, playback_start.",
+        "KEN BURNS / ANIMATE STILL IMAGES: every still-image layer supports a built-in Ken Burns effect — a slow pan or zoom that spans the clip's full duration in both the preview and the final render. Apply it with editor_action set_layer_media and the ken_burns field (presets: zoom-in, zoom-out, pan-left, pan-right, pan-up, pan-down, zoom-in-left, zoom-in-right; 'none' removes it), optionally ken_burns_intensity (0.04-0.5, default 0.18; ~0.1 subtle, ~0.3 dramatic). When the user says 'animate the images', 'make the photos move', 'ken burns', or similar, apply a preset to EVERY still-image layer in one pass (one set_layer_media call per layer), varying presets across adjacent clips — e.g. zoom-in, then pan-left, then zoom-out — so consecutive stills don't repeat the same motion. Zoom presets suit subjects centered in frame (products, faces); pan presets suit wide scenery or tall screenshots. You can also seed ken_burns directly on add_layer (kind=image) or generate_layer (media_type=image) so freshly placed stills arrive already animated. It only applies to image layers — never set it on video, text, or audio.",
         "Use duplicate_layer to clone an existing layer; supply layer_key for the source, and optionally start/duration/track/label on the duplicate. Use split_layer with layer_key and split_time to cut at a moment in the timeline. Use group_layers with layer_keys (>=2) and optional group_label; ungroup_layers with layer_keys of any grouped members.",
         "Prefer one editor_action call per mutation. For a multi-layer composition, sequence calls: generate or fetch each asset, then add or edit each layer with its own editor_action call. Chain edits by reusing the layer_key you assigned during add_layer.",
         "Layer/track ordering is the ONLY thing that controls visual stacking. `track` is both the timeline layer index AND the CSS z-index — the editor forces `z-index = track` on every layer at publish time. Higher track draws visually on top; lower track draws underneath. There is no separate z-index override — if the AI wants a layer above another, give it a higher track. If html/text overlays should sit ABOVE a video/image, their track must be a larger integer than the visual media below them.",

package/dist/src/frontend/homepage-client.js

@@ -142,21 +142,76 @@ function HomepageClientApp({ boot }) {
     }, [refreshFeed]);
     const handleAddTemplate = useCallback(async (submission) => {
         try {
+            // Upload path: presign → PUT the bytes (straight to S3, or the local
+            // multipart fallback) → finalize with the storage key. The URL path
+            // posts source_url directly, exactly as before.
+            let uploadRef = null;
+            if (submission.file) {
+                const file = submission.file;
+                const presignResponse = await fetch("/discover/templates/upload/presign", {
+                    method: "POST",
+                    credentials: "same-origin",
+                    headers: { "content-type": "application/json", Accept: "application/json" },
+                    body: JSON.stringify({
+                        file_name: file.name,
+                        content_type: file.type || null,
+                        size_bytes: file.size
+                    })
+                });
+                const presign = await presignResponse.json().catch(() => ({}));
+                if (!presignResponse.ok) {
+                    return { ok: false, error: presign.error || "Unable to start the video upload." };
+                }
+                if (presign.transport === "presigned" && presign.upload?.url && presign.storage_key) {
+                    const put = await fetch(presign.upload.url, {
+                        method: presign.upload.method || "PUT",
+                        headers: presign.upload.headers || {},
+                        body: file
+                    });
+                    if (!put.ok) {
+                        return { ok: false, error: `Video upload failed (${put.status}). Try again.` };
+                    }
+                    uploadRef = { storage_key: presign.storage_key, file_name: presign.file_name || file.name };
+                }
+                else {
+                    const form = new FormData();
+                    form.append("file", file, presign.file_name || file.name);
+                    const direct = await fetch(presign.upload?.url || "/discover/templates/upload", {
+                        method: "POST",
+                        credentials: "same-origin",
+                        body: form
+                    });
+                    const directPayload = await direct.json().catch(() => ({}));
+                    if (!direct.ok || !directPayload.storage_key) {
+                        return { ok: false, error: directPayload.error || "Video upload failed. Try again." };
+                    }
+                    uploadRef = { storage_key: directPayload.storage_key, file_name: directPayload.file_name || file.name };
+                }
+            }
             const response = await fetch("/discover/templates", {
                 method: "POST",
                 credentials: "same-origin",
                 headers: { "content-type": "application/json", Accept: "application/json" },
-                body: JSON.stringify({
-                    source_url: submission.sourceUrl,
-                    tagline: submission.tagline || null,
-                    notes: submission.notes || null
-                })
+                body: JSON.stringify(uploadRef
+                    ? {
+                        upload: uploadRef,
+                        title: submission.title || null,
+                        tagline: submission.tagline || null,
+                        notes: submission.notes || null
+                    }
+                    : {
+                        source_url: submission.sourceUrl,
+                        tagline: submission.tagline || null,
+                        notes: submission.notes || null
+                    })
             });
             const payload = await response.json().catch(() => ({}));
             if (!response.ok) {
                 return { ok: false, error: typeof payload.error === "string" && payload.error ? payload.error : "Unable to add that video." };
             }
-            debugLog("homepage.template_added", { source_url: submission.sourceUrl });
+            debugLog("homepage.template_added", uploadRef
+                ? { storage_key: uploadRef.storage_key }
+                : { source_url: submission.sourceUrl });
             await refreshFeed();
             return { ok: true };
         }

package/dist/src/frontend/homepage-view.js

@@ -11,6 +11,9 @@ function LibraryIcon() {
 function CalendarIcon() {
     return _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 6.3v4.1l2.8 1.7" })] });
 }
+function ClipsIcon() {
+    return _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "4.5", width: "14", height: "11", rx: "1.5" }), _jsx("path", { d: "M3 8h14" }), _jsx("path", { d: "M6.2 4.7 4.6 8" }), _jsx("path", { d: "M9.6 4.7 8 8" }), _jsx("path", { d: "M13 4.7 11.4 8" })] });
+}
 function ChatIcon() {
     return _jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M4.2 5.2a2 2 0 0 1 2-2h7.6a2 2 0 0 1 2 2v5.6a2 2 0 0 1-2 2H9.2l-4.1 3.1v-3.1a2 2 0 0 1-.9-1.7Z" }), _jsx("path", { d: "M7.3 7.1h5.4" }), _jsx("path", { d: "M7.3 9.6h3.7" })] });
 }
@@ -55,11 +58,13 @@ function PrimaryNav({ account }) {
         ? [
             { id: "discover", href: withAccountQuery("/discover", account.userId), label: "Discover", icon: _jsx(DiscoverIcon, {}) },
             { id: "library", href: withAccountQuery("/library", account.userId), label: "Library", icon: _jsx(LibraryIcon, {}) },
+            { id: "clips", href: "/clips", label: "Clips", icon: _jsx(ClipsIcon, {}) },
             { id: "calendar", href: withAccountQuery("/calendar", account.userId), label: "Calendar", icon: _jsx(CalendarIcon, {}) },
             { id: "settings", href: withAccountQuery("/settings", account.userId), label: "Settings", icon: _jsx(SettingsIcon, {}) }
         ]
         : [
             { id: "discover", href: "/discover", label: "Discover", icon: _jsx(DiscoverIcon, {}) },
+            { id: "clips", href: "/clips", label: "Clips", icon: _jsx(ClipsIcon, {}) },
             { id: "login", href: "/login", label: "Login", icon: _jsx(SettingsIcon, {}) }
         ];
     const menuItems = account.isLoggedIn
@@ -425,6 +430,8 @@ function PreviewModal(input) {
 function AddTemplateModal(input) {
     const { onClose } = input;
     const [sourceUrl, setSourceUrl] = useState("");
+    const [file, setFile] = useState(null);
+    const [title, setTitle] = useState("");
     const [tagline, setTagline] = useState("");
     const [notes, setNotes] = useState("");
     const [submitting, setSubmitting] = useState(false);
@@ -445,13 +452,17 @@ function AddTemplateModal(input) {
     }, [onClose]);
     const handleSubmit = async () => {
         const trimmedUrl = sourceUrl.trim();
-        if (!trimmedUrl) {
-            setError("Paste a TikTok, YouTube, Twitter/X, or Instagram video URL.");
+        if (!trimmedUrl && !file) {
+            setError("Paste a TikTok, YouTube, Twitter/X, or Instagram video URL — or upload a video file.");
+            return;
+        }
+        if (file && file.size > 200 * 1024 * 1024) {
+            setError("Video uploads can be at most 200 MB.");
             return;
         }
         setSubmitting(true);
         setError(null);
-        const result = await (input.onAddTemplate?.({ sourceUrl: trimmedUrl, tagline: tagline.trim(), notes: notes.trim() })
+        const result = await (input.onAddTemplate?.({ sourceUrl: file ? "" : trimmedUrl, file, title: title.trim(), tagline: tagline.trim(), notes: notes.trim() })
             ?? Promise.resolve({ ok: false, error: "Adding templates is unavailable right now." }));
         setSubmitting(false);
         if (result.ok) {
@@ -464,7 +475,14 @@ function AddTemplateModal(input) {
     return (_jsx("div", { className: "discover-media-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "discover-media-modal discover-add-template-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": "discover-add-template-title", onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "discover-media-modal-head", children: [_jsx("h2", { id: "discover-add-template-title", children: "Add Template" }), _jsx("div", { className: "discover-media-modal-actions", children: _jsx("button", { className: "discover-media-modal-action", type: "button", "aria-label": "Close", title: "Close", onClick: onClose, children: _jsx(CloseIcon, {}) }) })] }), _jsxs("form", { className: "discover-add-template-form", onSubmit: (event) => {
                         event.preventDefault();
                         void handleSubmit();
-                    }, children: [_jsx("p", { className: "discover-add-template-hint", children: "Paste a link to a TikTok, YouTube, Twitter/X, or Instagram video. We download it and add it to your Discover feed \u2014 visible only to your account." }), _jsxs("div", { className: "discover-add-template-field", children: [_jsx("label", { className: "label", htmlFor: "add-template-url", children: "Video URL" }), _jsx("input", { id: "add-template-url", type: "url", required: true, placeholder: "https://www.tiktok.com/@creator/video/\u2026", autoComplete: "off", value: sourceUrl, onChange: (event) => setSourceUrl(event.target.value) })] }), _jsxs("div", { className: "discover-add-template-field", children: [_jsxs("label", { className: "label", htmlFor: "add-template-tagline", children: ["Tagline ", _jsx("span", { className: "discover-add-template-optional", children: "optional" })] }), _jsx("input", { id: "add-template-tagline", type: "text", placeholder: "What makes this video work?", autoComplete: "off", maxLength: 140, value: tagline, onChange: (event) => setTagline(event.target.value) })] }), _jsxs("div", { className: "discover-add-template-field", children: [_jsxs("label", { className: "label", htmlFor: "add-template-notes", children: ["Notes ", _jsx("span", { className: "discover-add-template-optional", children: "optional" })] }), _jsx("textarea", { id: "add-template-notes", rows: 4, placeholder: "Ideas for how you want to remix this\u2026", maxLength: 2000, value: notes, onChange: (event) => setNotes(event.target.value) })] }), error ? _jsx("p", { className: "discover-add-template-error", role: "alert", children: error }) : null, _jsxs("div", { className: "toolbar discover-add-template-actions", children: [_jsx("button", { type: "button", className: "secondary", onClick: onClose, disabled: submitting, children: "Cancel" }), _jsx("button", { type: "submit", className: "cta-button discover-add-template-submit", disabled: submitting, children: submitting ? "Adding…" : "Add Template" })] })] })] }) }));
+                    }, children: [_jsx("p", { className: "discover-add-template-hint", children: "Paste a link to a TikTok, YouTube, Twitter/X, or Instagram video \u2014 or upload a video file from your computer. We add it to your Discover feed, visible only to your account." }), _jsxs("div", { className: "discover-add-template-field", children: [_jsx("label", { className: "label", htmlFor: "add-template-url", children: "Video URL" }), _jsx("input", { id: "add-template-url", type: "url", required: !file, disabled: Boolean(file), placeholder: "https://www.tiktok.com/@creator/video/\u2026", autoComplete: "off", value: sourceUrl, onChange: (event) => setSourceUrl(event.target.value) })] }), _jsxs("div", { className: "discover-add-template-field", children: [_jsxs("label", { className: "label", htmlFor: "add-template-file", children: ["Or upload a video ", _jsx("span", { className: "discover-add-template-optional", children: "MP4 / MOV / WebM, up to 200 MB" })] }), file ? (_jsxs("div", { className: "discover-add-template-file-chip", children: [_jsx("span", { className: "discover-add-template-file-name", children: file.name }), _jsxs("span", { className: "discover-add-template-file-size", children: [(file.size / (1024 * 1024)).toFixed(1), " MB"] }), _jsx("button", { type: "button", className: "discover-add-template-file-clear", "aria-label": "Remove selected file", onClick: () => setFile(null), children: "\u2715" })] })) : (_jsx("input", { id: "add-template-file", type: "file", accept: "video/mp4,video/quicktime,video/webm,.mp4,.m4v,.mov,.webm", onChange: (event) => {
+                                        const selected = event.target.files?.[0] ?? null;
+                                        if (selected) {
+                                            setFile(selected);
+                                            setSourceUrl("");
+                                            setError(null);
+                                        }
+                                    } }))] }), file ? (_jsxs("div", { className: "discover-add-template-field", children: [_jsxs("label", { className: "label", htmlFor: "add-template-title", children: ["Title ", _jsx("span", { className: "discover-add-template-optional", children: "optional \u2014 defaults to the template id" })] }), _jsx("input", { id: "add-template-title", type: "text", placeholder: "Name this template\u2026", autoComplete: "off", maxLength: 140, value: title, onChange: (event) => setTitle(event.target.value) })] })) : null, _jsxs("div", { className: "discover-add-template-field", children: [_jsxs("label", { className: "label", htmlFor: "add-template-tagline", children: ["Tagline ", _jsx("span", { className: "discover-add-template-optional", children: "optional" })] }), _jsx("input", { id: "add-template-tagline", type: "text", placeholder: "What makes this video work?", autoComplete: "off", maxLength: 140, value: tagline, onChange: (event) => setTagline(event.target.value) })] }), _jsxs("div", { className: "discover-add-template-field", children: [_jsxs("label", { className: "label", htmlFor: "add-template-notes", children: ["Notes ", _jsx("span", { className: "discover-add-template-optional", children: "optional" })] }), _jsx("textarea", { id: "add-template-notes", rows: 4, placeholder: "Ideas for how you want to remix this\u2026", maxLength: 2000, value: notes, onChange: (event) => setNotes(event.target.value) })] }), error ? _jsx("p", { className: "discover-add-template-error", role: "alert", children: error }) : null, _jsxs("div", { className: "toolbar discover-add-template-actions", children: [_jsx("button", { type: "button", className: "secondary", onClick: onClose, disabled: submitting, children: "Cancel" }), _jsx("button", { type: "submit", className: "cta-button discover-add-template-submit", disabled: submitting, children: submitting ? (file ? "Uploading…" : "Adding…") : "Add Template" })] })] })] }) }));
 }
 export function HomepageShell(input) {
     const showEmpty = !input.loading && !input.error && input.templates.length > 0 && input.visibleTemplates.length === 0;

package/dist/src/homepage.js

@@ -205,6 +205,52 @@ export function renderHomepage(input) {
         letter-spacing: normal;
       }
 
+      .discover-add-template-field input[type="file"] {
+        padding: 8px 10px;
+        cursor: pointer;
+      }
+
+      .discover-add-template-file-chip {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 14px;
+        border: 1px solid rgba(209, 219, 233, 0.96);
+        border-radius: 14px;
+        background: rgba(255, 255, 255, 0.94);
+        color: #2d3748;
+        font-size: 0.94rem;
+      }
+
+      .discover-add-template-file-name {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .discover-add-template-file-size {
+        color: #9aa6ba;
+        font-size: 0.86rem;
+        white-space: nowrap;
+      }
+
+      .discover-add-template-file-clear {
+        border: none;
+        background: none;
+        color: #6a7890;
+        font-size: 0.9rem;
+        cursor: pointer;
+        padding: 2px 6px;
+        border-radius: 8px;
+      }
+
+      .discover-add-template-file-clear:hover {
+        background: rgba(209, 219, 233, 0.5);
+        color: #2d3748;
+      }
+
       .discover-add-template-error {
         margin: 0;
         color: #a14444;

package/dist/src/hyperframes/composition.js

@@ -1,3 +1,80 @@
+export const KEN_BURNS_PRESETS = [
+    "zoom-in",
+    "zoom-out",
+    "pan-left",
+    "pan-right",
+    "pan-up",
+    "pan-down",
+    "zoom-in-left",
+    "zoom-in-right"
+];
+// Ken Burns is stored declaratively: the still-image layer element (the <img>
+// that carries data-start) also carries data-kenburns="<preset>" plus optional
+// inline vars (--vf-kb-amount / --vf-kb-origin / --vf-kb-dur). The animation
+// runs directly on that <img> via CSS transform, so the ONE element that owns
+// the timeline (data-start/duration) is also the one that animates — which is
+// exactly what the render's per-frame CSS-animation adapter keys off (it seeks
+// each animation by time-minus-that-element's-data-start). No wrapper, so every
+// existing "image layer is an <img>" invariant in the editor and timeline holds.
+// This static stylesheet supplies the keyframes; any surface that toggles the
+// attribute (builder, editor, chat agent, devcli) gets identical motion in the
+// preview runtime and both render pipelines. The marker comment is the
+// idempotency key for serve/publish-time injection into stored HTML.
+export const KEN_BURNS_STYLE_MARKER = "__VF_KENBURNS_V1__";
+export const KEN_BURNS_CSS = `/*${KEN_BURNS_STYLE_MARKER}*/
+@keyframes vf-kb-zoom-in { from { transform: translate(0%, 0%) scale(1); } to { transform: translate(0%, 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } }
+@keyframes vf-kb-zoom-out { from { transform: translate(0%, 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } to { transform: translate(0%, 0%) scale(1); } }
+@keyframes vf-kb-pan-left { from { transform: translate(calc(var(--vf-kb-amount, 0.18) * 45%), 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } to { transform: translate(calc(var(--vf-kb-amount, 0.18) * -45%), 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } }
+@keyframes vf-kb-pan-right { from { transform: translate(calc(var(--vf-kb-amount, 0.18) * -45%), 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } to { transform: translate(calc(var(--vf-kb-amount, 0.18) * 45%), 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } }
+@keyframes vf-kb-pan-up { from { transform: translate(0%, calc(var(--vf-kb-amount, 0.18) * 45%)) scale(calc(1 + var(--vf-kb-amount, 0.18))); } to { transform: translate(0%, calc(var(--vf-kb-amount, 0.18) * -45%)) scale(calc(1 + var(--vf-kb-amount, 0.18))); } }
+@keyframes vf-kb-pan-down { from { transform: translate(0%, calc(var(--vf-kb-amount, 0.18) * -45%)) scale(calc(1 + var(--vf-kb-amount, 0.18))); } to { transform: translate(0%, calc(var(--vf-kb-amount, 0.18) * 45%)) scale(calc(1 + var(--vf-kb-amount, 0.18))); } }
+@keyframes vf-kb-zoom-in-left { from { transform: translate(0%, 0%) scale(1); } to { transform: translate(calc(var(--vf-kb-amount, 0.18) * -45%), 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } }
+@keyframes vf-kb-zoom-in-right { from { transform: translate(0%, 0%) scale(1); } to { transform: translate(calc(var(--vf-kb-amount, 0.18) * 45%), 0%) scale(calc(1 + var(--vf-kb-amount, 0.18))); } }
+[data-kenburns] {
+  transform-origin: var(--vf-kb-origin, 50% 50%);
+  animation-duration: var(--vf-kb-dur, 5s);
+  animation-timing-function: var(--vf-kb-ease, linear);
+  animation-fill-mode: both;
+  animation-play-state: paused;
+  will-change: transform;
+  backface-visibility: hidden;
+}
+[data-kenburns="zoom-in"] { animation-name: vf-kb-zoom-in; }
+[data-kenburns="zoom-out"] { animation-name: vf-kb-zoom-out; }
+[data-kenburns="pan-left"] { animation-name: vf-kb-pan-left; }
+[data-kenburns="pan-right"] { animation-name: vf-kb-pan-right; }
+[data-kenburns="pan-up"] { animation-name: vf-kb-pan-up; }
+[data-kenburns="pan-down"] { animation-name: vf-kb-pan-down; }
+[data-kenburns="zoom-in-left"] { animation-name: vf-kb-zoom-in-left; }
+[data-kenburns="zoom-in-right"] { animation-name: vf-kb-zoom-in-right; }
+`;
+// Serializes a Ken Burns config into the inline CSS custom properties the
+// stylesheet reads. Kept next to the CSS so presets and vars never drift.
+export function kenBurnsInlineVars(kenBurns, durationSeconds) {
+    const vars = [];
+    if (durationSeconds !== undefined && Number.isFinite(durationSeconds) && durationSeconds > 0) {
+        vars.push(`--vf-kb-dur:${Number(durationSeconds.toFixed(3))}s`);
+    }
+    if (kenBurns.intensity !== undefined)
+        vars.push(`--vf-kb-amount:${Number(kenBurns.intensity.toFixed(4))}`);
+    if (kenBurns.origin)
+        vars.push(`--vf-kb-origin:${kenBurns.origin}`);
+    return vars.join(";");
+}
+export function normalizeKenBurns(value) {
+    if (!value)
+        return null;
+    const raw = typeof value === "string" ? { preset: value } : value;
+    if (!KEN_BURNS_PRESETS.includes(raw.preset))
+        return null;
+    const intensity = Number(raw.intensity);
+    const origin = typeof raw.origin === "string" && raw.origin.trim() ? raw.origin.trim() : undefined;
+    return {
+        preset: raw.preset,
+        intensity: Number.isFinite(intensity) ? Math.max(0.04, Math.min(0.5, intensity)) : undefined,
+        origin
+    };
+}
 export function buildHyperframeCompositionHtml(input) {
     const duration = positiveNumber(input.duration, inferDuration(input.layers));
     const width = positiveInteger(input.width, 720);
@@ -15,6 +92,7 @@ export function buildHyperframeCompositionHtml(input) {
     html, body { width:100%; height:100%; margin:0; overflow:hidden; background:${background}; }
     [data-composition-id] { position:relative; width:100vw; height:100vh; overflow:hidden; background:${background}; }
     audio { display:none; }
+    ${KEN_BURNS_CSS}
     ${input.css ?? ""}
   </style>
 </head>
@@ -50,6 +128,15 @@ function renderLayer(layer) {
         return `<audio ${attrs} src="${escapeAttr(layer.src || "")}" data-timeline-role="music" data-volume="${num(positiveNumber(layer.volume, 1))}" preload="metadata"></audio>`;
     }
     if (layer.kind === "image") {
+        const kenBurns = normalizeKenBurns(layer.kenBurns);
+        if (kenBurns) {
+            // The animation lives directly on the <img> — the same node that carries
+            // data-start — so the render's CSS adapter seeks it by (frameTime -
+            // data-start) and it plays across exactly the clip's span.
+            const vars = kenBurnsInlineVars(kenBurns, positiveNumber(layer.duration, 0));
+            const kbStyle = vars ? `${style};${vars}` : style;
+            return `<img ${attrs} data-kenburns="${escapeAttr(kenBurns.preset)}" src="${escapeAttr(layer.src || "")}" alt="" style="${escapeAttr(kbStyle)}" />`;
+        }
         return `<img ${attrs} src="${escapeAttr(layer.src || "")}" alt="" style="${escapeAttr(style)}" />`;
     }
     if (layer.kind === "html") {

package/dist/src/primitive-registry.js

@@ -412,6 +412,14 @@ const downloadVideoPayloadSchema = z.preprocess((raw) => {
     quality: z.enum(["best", "hd", "full_hd"]).default("best"),
     save_manifest: z.boolean().default(true)
 }));
+// Ingest of an already-uploaded video file (Add Template → upload). The URL is
+// server-minted (our own storage), so no social-host restrictions apply.
+const ingestVideoPayloadSchema = z.object({
+    source_video_url: z.string().url(),
+    title: z.string().min(1).max(300).optional(),
+    file_name: z.string().min(1).max(300).optional(),
+    save_manifest: z.boolean().default(true)
+});
 const brainstormHooksPayloadSchema = z.preprocess(normalizeOfferDescriptionPayload, z.object({
     offer_description: z.string().min(10).max(12_000),
     count: brainstormCountSchema,
@@ -480,6 +488,7 @@ const PRIMITIVE_VIDEO_GENERATE_ID = "primitive:video_generate";
 const PRIMITIVE_VIDEO_RENDER_SLIDES_ID = "primitive:video_render_slides";
 const PRIMITIVE_VIDEO_NORMALIZE_ID = "primitive:video_normalize";
 const PRIMITIVE_VIDEO_DOWNLOAD_ID = "primitive:video_download";
+const PRIMITIVE_VIDEO_INGEST_ID = "primitive:video_ingest";
 const PRIMITIVE_VIDEO_TRIM_ID = "primitive:video_trim";
 const PRIMITIVE_VIDEO_REMOVE_CAPTIONS_ID = "primitive:video_remove_captions";
 const PRIMITIVE_VIDEO_EXTRACT_AUDIO_ID = "primitive:video_extract_audio";
@@ -1188,6 +1197,132 @@ const videoDownloadPrimitive = definePrimitive({
         }
     }
 });
+// Upload-based sibling of video_download: the source video already sits in our
+// storage (uploaded via the Add Template flow), so there is no social lookup —
+// just mirror it into a durable job artifact, probe duration, and grab a
+// thumbnail frame. Output shape matches video_download so the inspiration
+// finalizer treats both identically.
+const videoIngestPrimitive = definePrimitive({
+    id: PRIMITIVE_VIDEO_INGEST_ID,
+    kind: "video_ingest",
+    operations: {
+        run: {
+            description: "Ingest an uploaded source video file into a durable reusable platform MP4 with probed metadata and a thumbnail.",
+            inputSchema: ingestVideoPayloadSchema,
+            workflow: "run"
+        }
+    },
+    jobs: {
+        async run(ctx, input) {
+            const payload = ingestVideoPayloadSchema.parse(input);
+            const sourceUrl = payload.source_video_url;
+            const sourceHost = safeUrlHost(sourceUrl);
+            ctx.logger.progress(0.12, "Fetching uploaded source video", { sourceUrl, sourceHost });
+            const remoteVideo = await fetchRemoteBinary(sourceUrl, "video/mp4");
+            const contentType = normalizeVideoContentType(remoteVideo.contentType);
+            const extension = videoExtensionForContentType(contentType);
+            const storedVideo = await storePrimitiveVideo(ctx, {
+                key: `source-video.${extension}`,
+                bytes: remoteVideo.bytes,
+                contentType,
+                metadata: {
+                    primitive: "video_ingest",
+                    operation: "ingest-video",
+                    source_url: sourceUrl,
+                    source_host: sourceHost,
+                    file_name: payload.file_name ?? null
+                }
+            });
+            // Best-effort enrichment: a probe past the duration cap or a failed
+            // thumbnail must not sink the ingest — the card still finalizes and the
+            // template can decompose later.
+            let durationSeconds = null;
+            ctx.logger.progress(0.55, "Probing uploaded video metadata");
+            try {
+                const probed = await executePrimitiveMediaOperation(ctx, {
+                    operation: "video_probe",
+                    payload: { source_video_url: storedVideo.url },
+                    outputKey: "probe.json"
+                });
+                const probedDuration = Number(probed.metadata?.durationSeconds);
+                durationSeconds = Number.isFinite(probedDuration) && probedDuration > 0 ? probedDuration : null;
+            }
+            catch (error) {
+                ctx.logger.progress(0.6, "Video probe skipped", {
+                    error: error instanceof Error ? error.message : String(error)
+                });
+            }
+            let thumbnailUrl = null;
+            ctx.logger.progress(0.7, "Extracting thumbnail frame");
+            try {
+                const frame = await executePrimitiveMediaOperation(ctx, {
+                    operation: "video_extract_frame",
+                    payload: { source_video_url: storedVideo.url, at_ms: 0, output_format: "jpeg" },
+                    outputKey: "thumbnail.jpg"
+                });
+                thumbnailUrl = frame.publicUrl;
+            }
+            catch (error) {
+                ctx.logger.progress(0.75, "Thumbnail extraction skipped", {
+                    error: error instanceof Error ? error.message : String(error)
+                });
+            }
+            const manifest = {
+                primitive: "video_ingest",
+                operation: "ingest-video",
+                sourceUrl,
+                sourceHost,
+                // Caller-chosen title only — never the file name. Untitled ingests
+                // finalize with title null so the template displays as its id.
+                title: payload.title ?? null,
+                thumbnail: thumbnailUrl,
+                duration: durationSeconds,
+                source: "upload",
+                videoUrl: storedVideo.url
+            };
+            const manifestArtifact = payload.save_manifest
+                ? await ctx.storage.putJson("manifest.json", manifest)
+                : null;
+            await ctx.billing.record({
+                type: "cpu_estimate",
+                costUsd: config.RAPIDAPI_VIDEO_DOWNLOAD_LAMBDA_COST_USD,
+                costCenterSlug: "video_ingest_lambda",
+                idempotencyKey: `video_ingest_lambda:${sourceUrl}:${storedVideo.key}`,
+                occurredAtMs: Date.now(),
+                metadata: {
+                    operation: "ingest-video",
+                    source_url: sourceUrl,
+                    source_host: sourceHost,
+                    output_key: storedVideo.key,
+                    content_type: contentType,
+                    bytes: remoteVideo.bytes.length
+                }
+            });
+            ctx.logger.progress(1, "Video ingest complete", {
+                videoUrl: storedVideo.url,
+                durationSeconds,
+                thumbnailUrl
+            });
+            return {
+                progress: 1,
+                output: {
+                    files: compactUrls([storedVideo.url, thumbnailUrl, manifestArtifact?.url]),
+                    sourceUrl,
+                    sourceHost,
+                    videoUrl: storedVideo.url,
+                    sourceVideoUrl: storedVideo.url,
+                    primary_file_url: storedVideo.url,
+                    title: manifest.title,
+                    thumbnail: thumbnailUrl,
+                    duration: durationSeconds,
+                    // Manifest CONTENT (not the artifact record) so the inspiration
+                    // finalizer can read thumbnail/title/duration directly.
+                    manifest
+                }
+            };
+        }
+    }
+});
 const videoTrimPrimitive = definePrimitive({
     id: PRIMITIVE_VIDEO_TRIM_ID,
     kind: "video_trim",
@@ -1987,6 +2122,7 @@ class PrimitiveRegistry {
         [mediaDedupePrimitive.id, mediaDedupePrimitive],
         [videoNormalizePrimitive.id, videoNormalizePrimitive],
         [videoDownloadPrimitive.id, videoDownloadPrimitive],
+        [videoIngestPrimitive.id, videoIngestPrimitive],
         [videoTrimPrimitive.id, videoTrimPrimitive],
         [videoRemoveCaptionsPrimitive.id, videoRemoveCaptionsPrimitive],
         [videoExtractAudioPrimitive.id, videoExtractAudioPrimitive],

package/dist/src/services/billing.js

@@ -162,6 +162,7 @@ function resolveCostCenterSlug(input) {
             || explicitSlug === "video_normalization"
             || explicitSlug === "rapidapi_video_download"
             || explicitSlug === "video_download_lambda"
+            || explicitSlug === "video_ingest_lambda"
             || explicitSlug === "rapidapi_remove_background"
             || explicitSlug === "primitive_media_lambda"
             || explicitSlug === "job_runner_lambda"