feat(media): resvg motion graphics renderer with brand-kit templates
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0138YqDj3ttfayRwuMKKrqVj
This commit is contained in:
Claude
parent
7ccc96ac11
commit
b5cef21f44
10
packages/adapters/src/media-motion-renderer.ts
Normal file
10
packages/adapters/src/media-motion-renderer.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
export type {
|
||||||
|
MotionFrameContext,
|
||||||
|
MotionTemplate,
|
||||||
|
ResvgMotionGraphicsRendererOptions,
|
||||||
|
} from "./media-motion/index.js";
|
||||||
|
export {
|
||||||
|
MOTION_TEMPLATES,
|
||||||
|
MotionTemplateError,
|
||||||
|
ResvgMotionGraphicsRenderer,
|
||||||
|
} from "./media-motion/index.js";
|
||||||
56
packages/adapters/src/media-motion/easing.ts
Normal file
56
packages/adapters/src/media-motion/easing.ts
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
/** Easing and timing helpers shared by every motion template. All pure. */
|
||||||
|
|
||||||
|
export function clamp(value: number, min = 0, max = 1): number {
|
||||||
|
return Math.min(max, Math.max(min, value));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function lerp(from: number, to: number, amount: number): number {
|
||||||
|
return from + (to - from) * amount;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Linear progress 0..1 of `t` through the window [start, end]. */
|
||||||
|
export function progress(t: number, start: number, end: number): number {
|
||||||
|
if (end <= start) return t >= end ? 1 : 0;
|
||||||
|
return clamp((t - start) / (end - start));
|
||||||
|
}
|
||||||
|
|
||||||
|
export function easeInCubic(x: number): number {
|
||||||
|
return x * x * x;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function easeOutCubic(x: number): number {
|
||||||
|
return 1 - (1 - x) ** 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function easeInOutCubic(x: number): number {
|
||||||
|
return x < 0.5 ? 4 * x * x * x : 1 - (-2 * x + 2) ** 3 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function easeOutExpo(x: number): number {
|
||||||
|
return x >= 1 ? 1 : 1 - 2 ** (-10 * x);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Overshoots slightly before settling; for pop-in reveals. */
|
||||||
|
export function easeOutBack(x: number): number {
|
||||||
|
const c1 = 1.70158;
|
||||||
|
const c3 = c1 + 1;
|
||||||
|
return 1 + c3 * (x - 1) ** 3 + c1 * (x - 1) ** 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Opacity envelope for a clip of `durationMs`: fades in over `inMs` and out
|
||||||
|
* over the last `outMs`.
|
||||||
|
*/
|
||||||
|
export function fadeEnvelope(t: number, durationMs: number, inMs: number, outMs: number): number {
|
||||||
|
const fadeIn = inMs > 0 ? easeOutCubic(progress(t, 0, inMs)) : 1;
|
||||||
|
const fadeOut = outMs > 0 ? 1 - easeInCubic(progress(t, durationMs - outMs, durationMs)) : 1;
|
||||||
|
return clamp(Math.min(fadeIn, fadeOut));
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Deterministic pseudo-random value in [0, 1) for integer seeds. */
|
||||||
|
export function hash01(a: number, b = 0): number {
|
||||||
|
let h = Math.imul(a ^ 0x9e3779b9, 0x85ebca6b) ^ Math.imul(b + 0x632be5ab, 0xc2b2ae35);
|
||||||
|
h = Math.imul(h ^ (h >>> 15), 0x2c1b3c6d);
|
||||||
|
h = Math.imul(h ^ (h >>> 12), 0x297a2d39);
|
||||||
|
return ((h ^ (h >>> 15)) >>> 0) / 4294967296;
|
||||||
|
}
|
||||||
308
packages/adapters/src/media-motion/index.ts
Normal file
308
packages/adapters/src/media-motion/index.ts
Normal file
@ -0,0 +1,308 @@
|
|||||||
|
/*
|
||||||
|
* Motion graphics renderer for Media Studio (intros, outros, lower thirds,
|
||||||
|
* caption previews, end cards).
|
||||||
|
*
|
||||||
|
* Technology decision: no Remotion and no headless Chromium. Remotion needs a
|
||||||
|
* paid company license above a team size and Chromium is a heavy, hard-to-
|
||||||
|
* sandbox runtime. Instead every template is a pure TypeScript function that
|
||||||
|
* returns an SVG document for a point in time. Frames are rasterized with
|
||||||
|
* @resvg/resvg-js (MPL-2.0; resvg itself is MPL-2.0, used unmodified as a
|
||||||
|
* library, commercially usable) and piped as PNGs into ffmpeg (LGPL/GPL
|
||||||
|
* depending on the build, invoked as a separate process with an argv array),
|
||||||
|
* which encodes a QuickTime Animation (qtrle, argb) MOV with alpha. Nothing
|
||||||
|
* here needs a network or a hosted service.
|
||||||
|
*/
|
||||||
|
import type { ChildProcess } from "node:child_process";
|
||||||
|
import { spawn } from "node:child_process";
|
||||||
|
import { randomUUID } from "node:crypto";
|
||||||
|
import { once } from "node:events";
|
||||||
|
import { readFile, rename, rm, stat } from "node:fs/promises";
|
||||||
|
import path from "node:path";
|
||||||
|
import type { MotionGraphicsRenderer, MotionRenderRequest } from "@rakazo/adapter-kit";
|
||||||
|
import type { BrandKit, MotionTemplateInfo, MotionTemplateRef } from "@rakazo/contracts";
|
||||||
|
import { BrandKitSchema, MotionTemplateRefSchema } from "@rakazo/contracts";
|
||||||
|
import { assertInside } from "@rakazo/media/node";
|
||||||
|
import type { RenderedImage, ResvgRenderOptions } from "@resvg/resvg-js";
|
||||||
|
import { renderAsync } from "@resvg/resvg-js";
|
||||||
|
import type { MotionFrameContext, MotionTemplate } from "./template.js";
|
||||||
|
import { brandFonts, MotionTemplateError, validateDuration, validateParams } from "./template.js";
|
||||||
|
import { captionBoldSocial, captionClean, captionKaraoke } from "./templates/captions.js";
|
||||||
|
import { endCardCta, endCardMinimal } from "./templates/end-cards.js";
|
||||||
|
import {
|
||||||
|
introElegantFade,
|
||||||
|
introGlitch,
|
||||||
|
introKineticType,
|
||||||
|
introLogoReveal,
|
||||||
|
} from "./templates/intros.js";
|
||||||
|
import { lowerThirdBar, lowerThirdClean, lowerThirdPill } from "./templates/lower-thirds.js";
|
||||||
|
import { outroLogo, outroSubscribe } from "./templates/outros.js";
|
||||||
|
|
||||||
|
export type { MotionFrameContext, MotionTemplate } from "./template.js";
|
||||||
|
export { MotionTemplateError } from "./template.js";
|
||||||
|
|
||||||
|
export const MOTION_TEMPLATES: readonly MotionTemplate[] = [
|
||||||
|
introLogoReveal,
|
||||||
|
introKineticType,
|
||||||
|
introGlitch,
|
||||||
|
introElegantFade,
|
||||||
|
outroLogo,
|
||||||
|
outroSubscribe,
|
||||||
|
lowerThirdClean,
|
||||||
|
lowerThirdBar,
|
||||||
|
lowerThirdPill,
|
||||||
|
captionClean,
|
||||||
|
captionKaraoke,
|
||||||
|
captionBoldSocial,
|
||||||
|
endCardCta,
|
||||||
|
endCardMinimal,
|
||||||
|
];
|
||||||
|
|
||||||
|
export function motionTemplate(id: string): MotionTemplate {
|
||||||
|
const template = MOTION_TEMPLATES.find((entry) => entry.info.id === id);
|
||||||
|
if (!template) throw new MotionTemplateError("unknown_template", `unknown template "${id}"`);
|
||||||
|
return template;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MIN_FRAME_SIDE = 16;
|
||||||
|
export const MAX_FRAME_SIDE = 3840;
|
||||||
|
export const MAX_FPS = 60;
|
||||||
|
/** Default cap on width × height × frames: ten seconds of 1080p60. */
|
||||||
|
export const DEFAULT_MAX_PIXEL_FRAMES = 1920 * 1080 * 60 * 10;
|
||||||
|
const MAX_LOGO_BYTES = 5 * 1024 * 1024;
|
||||||
|
const PNG_SIGNATURE = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
|
||||||
|
const FONT_EXTENSIONS = new Set([".ttf", ".otf", ".ttc"]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Read a logo as a data URI. Only PNG and SVG are accepted, and an SVG may not
|
||||||
|
* declare entities or reference anything outside itself.
|
||||||
|
*/
|
||||||
|
export async function loadLogoDataUri(file: string): Promise<string> {
|
||||||
|
const extension = path.extname(file).toLowerCase();
|
||||||
|
if (extension !== ".png" && extension !== ".svg")
|
||||||
|
throw new MotionTemplateError("invalid_asset", "logos must be PNG or SVG");
|
||||||
|
const info = await stat(file);
|
||||||
|
if (!info.isFile() || info.size > MAX_LOGO_BYTES)
|
||||||
|
throw new MotionTemplateError("invalid_asset", "logo is not a file or is too large");
|
||||||
|
const bytes = await readFile(file);
|
||||||
|
if (extension === ".png") {
|
||||||
|
if (!bytes.subarray(0, 8).equals(PNG_SIGNATURE))
|
||||||
|
throw new MotionTemplateError("invalid_asset", "logo is not a PNG");
|
||||||
|
return `data:image/png;base64,${bytes.toString("base64")}`;
|
||||||
|
}
|
||||||
|
const text = bytes.toString("utf8");
|
||||||
|
if (!/<svg[\s>]/i.test(text))
|
||||||
|
throw new MotionTemplateError("invalid_asset", "logo is not an SVG");
|
||||||
|
if (/<!DOCTYPE|<!ENTITY/i.test(text) || /\bhref\s*=\s*["']\s*(?!#|data:)/i.test(text))
|
||||||
|
throw new MotionTemplateError("invalid_asset", "SVG logos must be self-contained");
|
||||||
|
return `data:image/svg+xml;base64,${bytes.toString("base64")}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Validate a template reference and assemble the pure frame context. */
|
||||||
|
export function buildFrameContext(input: {
|
||||||
|
template: MotionTemplateRef;
|
||||||
|
kit: BrandKit;
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
logos: string[];
|
||||||
|
}): { template: MotionTemplate; ctx: MotionFrameContext } {
|
||||||
|
const ref = MotionTemplateRefSchema.parse(input.template);
|
||||||
|
const kit = BrandKitSchema.parse(input.kit);
|
||||||
|
const template = motionTemplate(ref.templateId);
|
||||||
|
validateDuration(template.info, ref.durationMs);
|
||||||
|
for (const side of [input.width, input.height]) {
|
||||||
|
if (!Number.isInteger(side) || side < MIN_FRAME_SIDE || side > MAX_FRAME_SIDE)
|
||||||
|
throw new MotionTemplateError(
|
||||||
|
"invalid_size",
|
||||||
|
`frame sides must be ${MIN_FRAME_SIDE}..${MAX_FRAME_SIDE} px`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
template,
|
||||||
|
ctx: {
|
||||||
|
width: input.width,
|
||||||
|
height: input.height,
|
||||||
|
durationMs: ref.durationMs,
|
||||||
|
kit,
|
||||||
|
params: validateParams(template.info, ref.params),
|
||||||
|
logos: input.logos,
|
||||||
|
fonts: brandFonts(kit),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RasterizeOptions {
|
||||||
|
fontFiles: string[];
|
||||||
|
defaultFontFamily?: string | null;
|
||||||
|
/** Fall back to system fonts for missing families and glyphs. */
|
||||||
|
loadSystemFonts: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function rasterizeFrame(svg: string, options: RasterizeOptions): Promise<RenderedImage> {
|
||||||
|
const resvgOptions: ResvgRenderOptions = {
|
||||||
|
font: {
|
||||||
|
loadSystemFonts: options.loadSystemFonts,
|
||||||
|
fontFiles: options.fontFiles,
|
||||||
|
...(options.defaultFontFamily ? { defaultFontFamily: options.defaultFontFamily } : {}),
|
||||||
|
},
|
||||||
|
logLevel: "off",
|
||||||
|
};
|
||||||
|
return renderAsync(svg, resvgOptions);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function frameCount(durationMs: number, fps: number): number {
|
||||||
|
return Math.max(1, Math.round((durationMs * fps) / 1000));
|
||||||
|
}
|
||||||
|
|
||||||
|
function abortError(): Error {
|
||||||
|
const error = new Error("motion render aborted");
|
||||||
|
error.name = "AbortError";
|
||||||
|
return error;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ResvgMotionGraphicsRendererOptions {
|
||||||
|
ffmpegPath?: string;
|
||||||
|
/** When set, every asset path and the output path must lie inside it. */
|
||||||
|
root?: string;
|
||||||
|
maxPixelFrames?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ResvgMotionGraphicsRenderer implements MotionGraphicsRenderer {
|
||||||
|
readonly id = "resvg";
|
||||||
|
private readonly ffmpegPath: string;
|
||||||
|
private readonly maxPixelFrames: number;
|
||||||
|
|
||||||
|
constructor(private readonly options: ResvgMotionGraphicsRendererOptions = {}) {
|
||||||
|
this.ffmpegPath = options.ffmpegPath ?? "ffmpeg";
|
||||||
|
this.maxPixelFrames = options.maxPixelFrames ?? DEFAULT_MAX_PIXEL_FRAMES;
|
||||||
|
}
|
||||||
|
|
||||||
|
templates(): MotionTemplateInfo[] {
|
||||||
|
return MOTION_TEMPLATES.map((template) => structuredClone(template.info));
|
||||||
|
}
|
||||||
|
|
||||||
|
async render(request: MotionRenderRequest): Promise<{ path: string; hasAlpha: boolean }> {
|
||||||
|
const { signal } = request;
|
||||||
|
if (signal?.aborted) throw abortError();
|
||||||
|
if (!Number.isFinite(request.fps) || request.fps < 1 || request.fps > MAX_FPS)
|
||||||
|
throw new MotionTemplateError("invalid_size", `fps must be 1..${MAX_FPS}`);
|
||||||
|
if (!path.isAbsolute(request.outPath) || path.extname(request.outPath).toLowerCase() !== ".mov")
|
||||||
|
throw new MotionTemplateError("invalid_asset", "outPath must be an absolute .mov path");
|
||||||
|
|
||||||
|
const outPath = await this.checkedPath(request.outPath);
|
||||||
|
const fontFiles: string[] = [];
|
||||||
|
for (const font of request.assets.fonts) {
|
||||||
|
const file = await this.checkedPath(font.path);
|
||||||
|
if (!FONT_EXTENSIONS.has(path.extname(file).toLowerCase()) || !(await stat(file)).isFile())
|
||||||
|
throw new MotionTemplateError("invalid_asset", "fonts must be TTF, OTF, or TTC files");
|
||||||
|
fontFiles.push(file);
|
||||||
|
}
|
||||||
|
const logos: string[] = [];
|
||||||
|
for (const logo of request.assets.logoPaths) {
|
||||||
|
logos.push(await loadLogoDataUri(await this.checkedPath(logo)));
|
||||||
|
}
|
||||||
|
|
||||||
|
const { template, ctx } = buildFrameContext({
|
||||||
|
template: request.template,
|
||||||
|
kit: request.brandKit,
|
||||||
|
width: request.width,
|
||||||
|
height: request.height,
|
||||||
|
logos,
|
||||||
|
});
|
||||||
|
const frames = frameCount(ctx.durationMs, request.fps);
|
||||||
|
if (ctx.width * ctx.height * frames > this.maxPixelFrames)
|
||||||
|
throw new MotionTemplateError("invalid_size", "motion clip exceeds the pixel budget");
|
||||||
|
|
||||||
|
const raster: RasterizeOptions = {
|
||||||
|
fontFiles,
|
||||||
|
defaultFontFamily: ctx.fonts.body,
|
||||||
|
loadSystemFonts: true,
|
||||||
|
};
|
||||||
|
const partial = path.join(
|
||||||
|
path.dirname(outPath),
|
||||||
|
`.${path.basename(outPath, ".mov")}.${randomUUID()}.partial.mov`,
|
||||||
|
);
|
||||||
|
const child = spawn(
|
||||||
|
this.ffmpegPath,
|
||||||
|
[
|
||||||
|
"-hide_banner",
|
||||||
|
"-loglevel",
|
||||||
|
"error",
|
||||||
|
"-nostdin",
|
||||||
|
"-f",
|
||||||
|
"image2pipe",
|
||||||
|
"-framerate",
|
||||||
|
String(request.fps),
|
||||||
|
"-c:v",
|
||||||
|
"png",
|
||||||
|
"-i",
|
||||||
|
"pipe:0",
|
||||||
|
"-an",
|
||||||
|
"-c:v",
|
||||||
|
"qtrle",
|
||||||
|
"-pix_fmt",
|
||||||
|
"argb",
|
||||||
|
"-f",
|
||||||
|
"mov",
|
||||||
|
partial,
|
||||||
|
],
|
||||||
|
{ stdio: ["pipe", "ignore", "pipe"], shell: false },
|
||||||
|
);
|
||||||
|
const exited = waitForExit(child);
|
||||||
|
const kill = () => child.kill("SIGKILL");
|
||||||
|
signal?.addEventListener("abort", kill, { once: true });
|
||||||
|
try {
|
||||||
|
const stdin = child.stdin!;
|
||||||
|
stdin.on("error", () => {});
|
||||||
|
for (let index = 0; index < frames; index += 1) {
|
||||||
|
if (signal?.aborted) throw abortError();
|
||||||
|
const svg = template.frame((index * 1000) / request.fps, ctx);
|
||||||
|
const png = (await rasterizeFrame(svg, raster)).asPng();
|
||||||
|
if (signal?.aborted) throw abortError();
|
||||||
|
if (!stdin.write(png)) {
|
||||||
|
const result = await Promise.race([once(stdin, "drain").then(() => null), exited]);
|
||||||
|
if (result) throw ffmpegError(result);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
stdin.end();
|
||||||
|
const result = await exited;
|
||||||
|
if (signal?.aborted) throw abortError();
|
||||||
|
if (result.code !== 0) throw ffmpegError(result);
|
||||||
|
await rename(partial, outPath);
|
||||||
|
return { path: outPath, hasAlpha: true };
|
||||||
|
} catch (error) {
|
||||||
|
kill();
|
||||||
|
await exited;
|
||||||
|
await rm(partial, { force: true });
|
||||||
|
throw signal?.aborted ? abortError() : error;
|
||||||
|
} finally {
|
||||||
|
signal?.removeEventListener("abort", kill);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async checkedPath(file: string): Promise<string> {
|
||||||
|
if (!path.isAbsolute(file) || file.includes("\0"))
|
||||||
|
throw new MotionTemplateError("invalid_asset", "asset paths must be absolute");
|
||||||
|
return this.options.root ? assertInside(this.options.root, file) : path.resolve(file);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ExitResult {
|
||||||
|
code: number | null;
|
||||||
|
stderr: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function waitForExit(child: ChildProcess): Promise<ExitResult> {
|
||||||
|
let stderr = "";
|
||||||
|
child.stderr?.setEncoding("utf8");
|
||||||
|
child.stderr?.on("data", (chunk: string) => {
|
||||||
|
stderr = (stderr + chunk).slice(-4000);
|
||||||
|
});
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
child.once("error", (error) => resolve({ code: -1, stderr: error.message }));
|
||||||
|
child.once("close", (code) => resolve({ code, stderr }));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function ffmpegError(result: ExitResult): Error {
|
||||||
|
return new Error(`ffmpeg failed (${result.code}): ${result.stderr.trim()}`);
|
||||||
|
}
|
||||||
441
packages/adapters/src/media-motion/media-motion.test.ts
Normal file
441
packages/adapters/src/media-motion/media-motion.test.ts
Normal file
@ -0,0 +1,441 @@
|
|||||||
|
import { execFileSync } from "node:child_process";
|
||||||
|
import { createHash } from "node:crypto";
|
||||||
|
import { existsSync } from "node:fs";
|
||||||
|
import { mkdtemp, readdir, rm, writeFile } from "node:fs/promises";
|
||||||
|
import { tmpdir } from "node:os";
|
||||||
|
import path from "node:path";
|
||||||
|
import type { BrandKit, MotionTemplateRef } from "@rakazo/contracts";
|
||||||
|
import { MotionTemplateInfoSchema } from "@rakazo/contracts";
|
||||||
|
import { afterAll, beforeAll, describe, expect, it } from "vitest";
|
||||||
|
import type { MotionTemplate } from "./index.js";
|
||||||
|
import {
|
||||||
|
buildFrameContext,
|
||||||
|
loadLogoDataUri,
|
||||||
|
MOTION_TEMPLATES,
|
||||||
|
MotionTemplateError,
|
||||||
|
motionTemplate,
|
||||||
|
ResvgMotionGraphicsRenderer,
|
||||||
|
rasterizeFrame,
|
||||||
|
} from "./index.js";
|
||||||
|
import { GLITCH_BURST_INTERVAL_MS } from "./templates/intros.js";
|
||||||
|
|
||||||
|
const DEJAVU_DIR = "/usr/share/fonts/truetype/dejavu";
|
||||||
|
const DEJAVU = ["DejaVuSans.ttf", "DejaVuSans-Bold.ttf", "DejaVuSerif.ttf"].map((name) =>
|
||||||
|
path.join(DEJAVU_DIR, name),
|
||||||
|
);
|
||||||
|
const hasDejaVu = DEJAVU.every((file) => existsSync(file));
|
||||||
|
const hasFfmpeg = (() => {
|
||||||
|
try {
|
||||||
|
execFileSync("ffmpeg", ["-hide_banner", "-encoders"], { stdio: "pipe" });
|
||||||
|
execFileSync("ffprobe", ["-version"], { stdio: "pipe" });
|
||||||
|
return true;
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
const LOGO_SVG =
|
||||||
|
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">' +
|
||||||
|
'<rect x="10" y="10" width="80" height="80" rx="20" fill="#ff8800"/>' +
|
||||||
|
'<circle cx="50" cy="50" r="22" fill="#ffffff"/></svg>';
|
||||||
|
|
||||||
|
const kit: BrandKit = {
|
||||||
|
name: "Test Brand",
|
||||||
|
colors: {
|
||||||
|
primary: "#2255cc",
|
||||||
|
secondary: "#9999aa",
|
||||||
|
accent: "#ff8800",
|
||||||
|
text: "#ffffff",
|
||||||
|
background: "#101820",
|
||||||
|
},
|
||||||
|
fonts: [{ family: "DejaVu Sans", artifactId: "font-1", role: "heading" }],
|
||||||
|
logoArtifactIds: ["logo-1"],
|
||||||
|
captionPresets: [],
|
||||||
|
musicBeds: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Parameters that exercise every template with all its text slots filled. */
|
||||||
|
const SAMPLE_PARAMS: Record<string, MotionTemplateRef["params"]> = {
|
||||||
|
intro_logo_reveal: { tagline: "Make it simple" },
|
||||||
|
intro_kinetic_type: { title: "Bold ideas move fast", tagline: "Since 2026" },
|
||||||
|
intro_glitch: { tagline: "Energy" },
|
||||||
|
intro_elegant_fade: { tagline: "Crafted slowly" },
|
||||||
|
outro_logo: { message: "Thanks" },
|
||||||
|
outro_subscribe: { cta: "Subscribe", handle: "@example" },
|
||||||
|
lt_clean: { title: "Alex Example", subtitle: "Host" },
|
||||||
|
lt_bar: { title: "Alex Example", subtitle: "Host", barColor: "accent" },
|
||||||
|
lt_pill: { title: "Alex Example", subtitle: "Host" },
|
||||||
|
caption_clean: { text: "A caption in the clean style" },
|
||||||
|
caption_karaoke: { text: "A caption in the karaoke style" },
|
||||||
|
caption_bold_social: { text: "Bold social caption" },
|
||||||
|
endcard_cta: { headline: "Get the full video", cta: "Watch now", price: "Only 9 today" },
|
||||||
|
endcard_minimal: { url: "example.com" },
|
||||||
|
};
|
||||||
|
|
||||||
|
let dir: string;
|
||||||
|
let logoPath: string;
|
||||||
|
let logo: string;
|
||||||
|
|
||||||
|
beforeAll(async () => {
|
||||||
|
dir = await mkdtemp(path.join(tmpdir(), "rakazo-motion-"));
|
||||||
|
logoPath = path.join(dir, "logo.svg");
|
||||||
|
await writeFile(logoPath, LOGO_SVG);
|
||||||
|
logo = await loadLogoDataUri(logoPath);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterAll(async () => {
|
||||||
|
await rm(dir, { recursive: true, force: true });
|
||||||
|
});
|
||||||
|
|
||||||
|
function context(
|
||||||
|
template: MotionTemplate,
|
||||||
|
overrides: {
|
||||||
|
params?: MotionTemplateRef["params"];
|
||||||
|
durationMs?: number;
|
||||||
|
size?: [number, number];
|
||||||
|
} = {},
|
||||||
|
) {
|
||||||
|
const [width, height] = overrides.size ?? [640, 360];
|
||||||
|
return buildFrameContext({
|
||||||
|
template: {
|
||||||
|
templateId: template.info.id,
|
||||||
|
params: overrides.params ?? SAMPLE_PARAMS[template.info.id] ?? {},
|
||||||
|
durationMs: overrides.durationMs ?? template.info.minDurationMs,
|
||||||
|
},
|
||||||
|
kit,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
logos: [logo],
|
||||||
|
}).ctx;
|
||||||
|
}
|
||||||
|
|
||||||
|
const raster = { fontFiles: DEJAVU, defaultFontFamily: "DejaVu Sans", loadSystemFonts: false };
|
||||||
|
|
||||||
|
/** Mean relative luminance of an RGBA frame composited over a solid backdrop. */
|
||||||
|
function meanLuminance(pixels: Buffer, backdrop: 0 | 1): number {
|
||||||
|
let sum = 0;
|
||||||
|
const count = pixels.length / 4;
|
||||||
|
for (let index = 0; index < pixels.length; index += 4) {
|
||||||
|
const alpha = pixels[index + 3]! / 255;
|
||||||
|
const channel = (offset: number) => {
|
||||||
|
const value = (pixels[index + offset]! / 255) * alpha + backdrop * (1 - alpha);
|
||||||
|
return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
|
||||||
|
};
|
||||||
|
sum += 0.2126 * channel(0) + 0.7152 * channel(1) + 0.0722 * channel(2);
|
||||||
|
}
|
||||||
|
return sum / count;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Count brightness reversals of at least 10% relative luminance (the WCAG 2.3.1
|
||||||
|
* flash threshold) per one-second window and return the worst window. A flash
|
||||||
|
* is a pair of opposing changes, so a steady fade counts as none; counting each
|
||||||
|
* reversal on its own is stricter than WCAG's three flashes per second.
|
||||||
|
*/
|
||||||
|
function maxReversalsPerSecond(series: number[], fps: number): number {
|
||||||
|
const transitions: number[] = [];
|
||||||
|
let direction = 0;
|
||||||
|
let extreme = series[0] ?? 0;
|
||||||
|
series.forEach((value, index) => {
|
||||||
|
const delta = value - extreme;
|
||||||
|
if (direction !== 0 && Math.sign(delta) === direction) {
|
||||||
|
extreme = value;
|
||||||
|
} else if (Math.abs(delta) >= 0.1) {
|
||||||
|
if (direction !== 0) transitions.push(index / fps);
|
||||||
|
direction = Math.sign(delta);
|
||||||
|
extreme = value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
let worst = 0;
|
||||||
|
for (const start of transitions) {
|
||||||
|
worst = Math.max(worst, transitions.filter((at) => at >= start && at < start + 1).length);
|
||||||
|
}
|
||||||
|
return worst;
|
||||||
|
}
|
||||||
|
|
||||||
|
describe("motion templates", () => {
|
||||||
|
it("ships the required set with valid, unique descriptors", () => {
|
||||||
|
const ids = MOTION_TEMPLATES.map((template) => template.info.id);
|
||||||
|
expect(new Set(ids).size).toBe(ids.length);
|
||||||
|
for (const template of MOTION_TEMPLATES) MotionTemplateInfoSchema.parse(template.info);
|
||||||
|
const count = (kind: string) =>
|
||||||
|
MOTION_TEMPLATES.filter((template) => template.info.kind === kind).length;
|
||||||
|
expect([
|
||||||
|
count("intro"),
|
||||||
|
count("outro"),
|
||||||
|
count("lower_third"),
|
||||||
|
count("caption"),
|
||||||
|
count("end_card"),
|
||||||
|
]).toEqual([4, 2, 3, 3, 2]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it.each(MOTION_TEMPLATES.map((template) => [template.info.id, template] as const))(
|
||||||
|
"%s renders its first, middle and last frame",
|
||||||
|
async (_id, template) => {
|
||||||
|
const ctx = context(template);
|
||||||
|
for (const t of [0, ctx.durationMs / 2, ctx.durationMs]) {
|
||||||
|
const svg = template.frame(t, ctx);
|
||||||
|
expect(svg.startsWith("<svg")).toBe(true);
|
||||||
|
expect(svg).not.toMatch(/NaN|undefined|Infinity/);
|
||||||
|
const image = await rasterizeFrame(svg, { fontFiles: [], loadSystemFonts: true });
|
||||||
|
expect([image.width, image.height]).toEqual([640, 360]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
it("takes every color from the brand kit", () => {
|
||||||
|
const allowed = new Set(Object.values(kit.colors).map((color) => color.toLowerCase()));
|
||||||
|
for (const template of MOTION_TEMPLATES) {
|
||||||
|
const ctx = context(template);
|
||||||
|
const svg = template.frame(ctx.durationMs / 2, ctx);
|
||||||
|
const colors = [...svg.matchAll(/(?:fill|stroke)="([^"]+)"/g)].map((match) => match[1]!);
|
||||||
|
for (const color of colors) {
|
||||||
|
if (color === "none" || color.startsWith("url(")) continue;
|
||||||
|
expect(allowed.has(color.toLowerCase()), `${template.info.id} uses ${color}`).toBe(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it.skipIf(!hasDejaVu)("renders deterministic middle frames", async () => {
|
||||||
|
const hashes: Record<string, string> = {};
|
||||||
|
for (const template of MOTION_TEMPLATES) {
|
||||||
|
const ctx = context(template);
|
||||||
|
const image = await rasterizeFrame(template.frame(ctx.durationMs / 2, ctx), raster);
|
||||||
|
hashes[template.info.id] = createHash("sha256")
|
||||||
|
.update(image.pixels)
|
||||||
|
.digest("hex")
|
||||||
|
.slice(0, 16);
|
||||||
|
}
|
||||||
|
expect(hashes).toMatchInlineSnapshot(`
|
||||||
|
{
|
||||||
|
"caption_bold_social": "4a132766b59cdf12",
|
||||||
|
"caption_clean": "6194d5224d8e97ec",
|
||||||
|
"caption_karaoke": "f2db9bc313e4ccea",
|
||||||
|
"endcard_cta": "943fa754c9a30803",
|
||||||
|
"endcard_minimal": "be2b9f833895bc36",
|
||||||
|
"intro_elegant_fade": "8f8a98930994243f",
|
||||||
|
"intro_glitch": "35074c7ad30d26bb",
|
||||||
|
"intro_kinetic_type": "52129b6c4f5581e3",
|
||||||
|
"intro_logo_reveal": "2baf101db044941b",
|
||||||
|
"lt_bar": "a13184996d2ffc2e",
|
||||||
|
"lt_clean": "ca6a4239283e111e",
|
||||||
|
"lt_pill": "30a7342e49735d69",
|
||||||
|
"outro_logo": "84b1cd23213f8a2e",
|
||||||
|
"outro_subscribe": "18733abc1b0f1296",
|
||||||
|
}
|
||||||
|
`);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("never changes full-frame brightness more than three times a second in the glitch intro", async () => {
|
||||||
|
const template = motionTemplate("intro_glitch");
|
||||||
|
const ctx = context(template, { durationMs: 4000, size: [160, 90] });
|
||||||
|
const fps = 25;
|
||||||
|
const dark: number[] = [];
|
||||||
|
const light: number[] = [];
|
||||||
|
for (let index = 0; index <= (ctx.durationMs * fps) / 1000; index += 1) {
|
||||||
|
const image = await rasterizeFrame(template.frame((index * 1000) / fps, ctx), {
|
||||||
|
fontFiles: [],
|
||||||
|
loadSystemFonts: true,
|
||||||
|
});
|
||||||
|
dark.push(meanLuminance(image.pixels, 0));
|
||||||
|
light.push(meanLuminance(image.pixels, 1));
|
||||||
|
}
|
||||||
|
expect(1000 / GLITCH_BURST_INTERVAL_MS).toBeLessThanOrEqual(3);
|
||||||
|
expect(maxReversalsPerSecond(dark, fps)).toBeLessThanOrEqual(3);
|
||||||
|
expect(maxReversalsPerSecond(light, fps)).toBeLessThanOrEqual(3);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("detects a frame that does flash too fast", () => {
|
||||||
|
const flashing = Array.from({ length: 50 }, (_, index) => (index % 5 < 2 ? 0.9 : 0.05));
|
||||||
|
expect(maxReversalsPerSecond(flashing, 50)).toBeGreaterThan(3);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("motion params and escaping", () => {
|
||||||
|
const lowerThird = motionTemplate("lt_clean");
|
||||||
|
|
||||||
|
it.each([
|
||||||
|
[{ title: "x", extra: "y" }, "unknown_param"],
|
||||||
|
[{ title: 3 }, "invalid_param"],
|
||||||
|
[{ title: "a\u0007b" }, "invalid_param"],
|
||||||
|
[{ subtitle: "only" }, "missing_param"],
|
||||||
|
] as const)("rejects %j", (params, code) => {
|
||||||
|
expect(() => context(lowerThird, { params })).toThrow(
|
||||||
|
expect.objectContaining({ code }) as unknown as Error,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("rejects oversized strings, unknown colors, durations, and frame sizes", () => {
|
||||||
|
expect(() => context(lowerThird, { params: { title: "x".repeat(201) } })).toThrow();
|
||||||
|
expect(() =>
|
||||||
|
context(motionTemplate("lt_bar"), { params: { title: "x", barColor: "#ff0000" } }),
|
||||||
|
).toThrow(MotionTemplateError);
|
||||||
|
expect(() => context(lowerThird, { durationMs: 60_000 })).toThrow(MotionTemplateError);
|
||||||
|
expect(() => context(lowerThird, { size: [8000, 360] })).toThrow(MotionTemplateError);
|
||||||
|
expect(() =>
|
||||||
|
buildFrameContext({
|
||||||
|
template: { templateId: "nope", params: {}, durationMs: 2000 },
|
||||||
|
kit,
|
||||||
|
width: 640,
|
||||||
|
height: 360,
|
||||||
|
logos: [],
|
||||||
|
}),
|
||||||
|
).toThrow(MotionTemplateError);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("escapes text and keeps hostile input out of the markup", async () => {
|
||||||
|
const hostile = `<script>alert("x")</script> & 'quotes' ]]> <!--`;
|
||||||
|
for (const template of MOTION_TEMPLATES) {
|
||||||
|
const params = Object.fromEntries(
|
||||||
|
template.info.params
|
||||||
|
.filter((param) => param.type === "string")
|
||||||
|
.map((param) => [param.name, hostile]),
|
||||||
|
);
|
||||||
|
const ctx = context(template, { params });
|
||||||
|
const svg = template.frame(ctx.durationMs / 2, ctx);
|
||||||
|
expect(svg).not.toContain("<script");
|
||||||
|
expect(svg).not.toContain("<!--");
|
||||||
|
await rasterizeFrame(svg, { fontFiles: [], loadSystemFonts: true });
|
||||||
|
}
|
||||||
|
const ctx = context(lowerThird, { params: { title: hostile } });
|
||||||
|
expect(lowerThird.frame(1000, ctx)).toContain("<script>alert("x")");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("shortens very long text instead of overflowing", () => {
|
||||||
|
const long = "W".repeat(200);
|
||||||
|
const ctx = context(lowerThird, { params: { title: long } });
|
||||||
|
const svg = lowerThird.frame(1000, ctx);
|
||||||
|
expect(svg).toContain("…");
|
||||||
|
expect(svg).not.toContain(long);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("strips CSS-breaking characters from font families", () => {
|
||||||
|
const ctx = buildFrameContext({
|
||||||
|
template: { templateId: "lt_clean", params: { title: "x" }, durationMs: 2000 },
|
||||||
|
kit: {
|
||||||
|
...kit,
|
||||||
|
fonts: [{ family: `Evil", url(x); "`, artifactId: "font-1", role: "heading" }],
|
||||||
|
},
|
||||||
|
width: 640,
|
||||||
|
height: 360,
|
||||||
|
logos: [],
|
||||||
|
}).ctx;
|
||||||
|
expect(ctx.fonts.heading).toBe("Evil urlx");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("accepts only self-contained PNG and SVG logos", async () => {
|
||||||
|
const jpg = path.join(dir, "logo.jpg");
|
||||||
|
const fakePng = path.join(dir, "fake.png");
|
||||||
|
const linked = path.join(dir, "linked.svg");
|
||||||
|
await writeFile(jpg, "x");
|
||||||
|
await writeFile(fakePng, "not a png");
|
||||||
|
await writeFile(
|
||||||
|
linked,
|
||||||
|
'<svg xmlns="http://www.w3.org/2000/svg"><image href="file:///etc/passwd"/></svg>',
|
||||||
|
);
|
||||||
|
for (const file of [jpg, fakePng, linked]) {
|
||||||
|
await expect(loadLogoDataUri(file)).rejects.toBeInstanceOf(MotionTemplateError);
|
||||||
|
}
|
||||||
|
expect(logo.startsWith("data:image/svg+xml;base64,")).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("ResvgMotionGraphicsRenderer", () => {
|
||||||
|
const request = (
|
||||||
|
outPath: string,
|
||||||
|
overrides: Partial<Parameters<ResvgMotionGraphicsRenderer["render"]>[0]> = {},
|
||||||
|
) => ({
|
||||||
|
template: { templateId: "intro_logo_reveal", params: { tagline: "Hello" }, durationMs: 1500 },
|
||||||
|
brandKit: kit,
|
||||||
|
assets: {
|
||||||
|
fonts: hasDejaVu ? [{ family: "DejaVu Sans", path: DEJAVU[0]! }] : [],
|
||||||
|
logoPaths: [logoPath],
|
||||||
|
},
|
||||||
|
width: 640,
|
||||||
|
height: 360,
|
||||||
|
fps: 25,
|
||||||
|
outPath,
|
||||||
|
...overrides,
|
||||||
|
});
|
||||||
|
|
||||||
|
it("lists its templates", () => {
|
||||||
|
expect(new ResvgMotionGraphicsRenderer().templates()).toHaveLength(MOTION_TEMPLATES.length);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("refuses clips over the pixel budget before starting ffmpeg", async () => {
|
||||||
|
const renderer = new ResvgMotionGraphicsRenderer({
|
||||||
|
maxPixelFrames: 640 * 360 * 10,
|
||||||
|
ffmpegPath: "/nonexistent",
|
||||||
|
});
|
||||||
|
await expect(renderer.render(request(path.join(dir, "big.mov")))).rejects.toMatchObject({
|
||||||
|
code: "invalid_size",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("refuses paths outside its root and non-MOV outputs", async () => {
|
||||||
|
const root = await mkdtemp(path.join(tmpdir(), "rakazo-motion-root-"));
|
||||||
|
try {
|
||||||
|
const renderer = new ResvgMotionGraphicsRenderer({ root, ffmpegPath: "/nonexistent" });
|
||||||
|
await expect(renderer.render(request(path.join(root, "out.mov")))).rejects.toThrow(/outside/);
|
||||||
|
await expect(renderer.render(request(path.join(root, "out.mp4")))).rejects.toMatchObject({
|
||||||
|
code: "invalid_asset",
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
await rm(root, { recursive: true, force: true });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it.skipIf(!hasFfmpeg)("renders a MOV with alpha of the requested length", async () => {
|
||||||
|
const outPath = path.join(dir, "intro.mov");
|
||||||
|
const result = await new ResvgMotionGraphicsRenderer().render(request(outPath));
|
||||||
|
expect(result).toEqual({ path: outPath, hasAlpha: true });
|
||||||
|
const probe = JSON.parse(
|
||||||
|
execFileSync("ffprobe", [
|
||||||
|
"-v",
|
||||||
|
"error",
|
||||||
|
"-select_streams",
|
||||||
|
"v:0",
|
||||||
|
"-show_entries",
|
||||||
|
"stream=codec_name,pix_fmt,width,height:format=duration",
|
||||||
|
"-of",
|
||||||
|
"json",
|
||||||
|
outPath,
|
||||||
|
]).toString(),
|
||||||
|
) as {
|
||||||
|
streams: Array<{ codec_name: string; pix_fmt: string; width: number; height: number }>;
|
||||||
|
format: { duration: string };
|
||||||
|
};
|
||||||
|
const stream = probe.streams[0]!;
|
||||||
|
expect(["qtrle", "prores"]).toContain(stream.codec_name);
|
||||||
|
expect(stream.pix_fmt).toMatch(/^(argb|rgba|bgra|yuva)/);
|
||||||
|
expect([stream.width, stream.height]).toEqual([640, 360]);
|
||||||
|
expect(Math.abs(Number(probe.format.duration) - 1.5)).toBeLessThanOrEqual(1 / 25);
|
||||||
|
expect((await readdir(dir)).filter((name) => name.includes("partial"))).toEqual([]);
|
||||||
|
});
|
||||||
|
|
||||||
|
it.skipIf(!hasFfmpeg)("cleans up when aborted mid-render", async () => {
|
||||||
|
const outDir = await mkdtemp(path.join(tmpdir(), "rakazo-motion-abort-"));
|
||||||
|
try {
|
||||||
|
const controller = new AbortController();
|
||||||
|
const outPath = path.join(outDir, "intro.mov");
|
||||||
|
const render = new ResvgMotionGraphicsRenderer().render(
|
||||||
|
request(outPath, {
|
||||||
|
template: { templateId: "intro_glitch", params: {}, durationMs: 4000 },
|
||||||
|
width: 1920,
|
||||||
|
height: 1080,
|
||||||
|
fps: 30,
|
||||||
|
signal: controller.signal,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
// Abort once ffmpeg has started writing its partial output.
|
||||||
|
for (let tries = 0; tries < 200 && (await readdir(outDir)).length === 0; tries += 1) {
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, 10));
|
||||||
|
}
|
||||||
|
controller.abort();
|
||||||
|
await expect(render).rejects.toMatchObject({ name: "AbortError" });
|
||||||
|
expect(await readdir(outDir)).toEqual([]);
|
||||||
|
} finally {
|
||||||
|
await rm(outDir, { recursive: true, force: true });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
305
packages/adapters/src/media-motion/template.ts
Normal file
305
packages/adapters/src/media-motion/template.ts
Normal file
@ -0,0 +1,305 @@
|
|||||||
|
import type { BrandKit, MotionTemplateInfo, MotionTemplateRef } from "@rakazo/contracts";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Shared building blocks for motion templates. A template is a pure function
|
||||||
|
* from (time, context) to a complete SVG document; everything visual comes from
|
||||||
|
* the brand kit in the context, and every piece of text passes through
|
||||||
|
* escapeXml before it reaches markup.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export type BrandColorRole = keyof BrandKit["colors"];
|
||||||
|
export const BRAND_COLOR_ROLES: readonly BrandColorRole[] = [
|
||||||
|
"primary",
|
||||||
|
"secondary",
|
||||||
|
"accent",
|
||||||
|
"text",
|
||||||
|
"background",
|
||||||
|
];
|
||||||
|
|
||||||
|
export type MotionParamValue = string | number | boolean;
|
||||||
|
|
||||||
|
export interface MotionFrameContext {
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
durationMs: number;
|
||||||
|
kit: BrandKit;
|
||||||
|
/** Validated against the template's parameter list. */
|
||||||
|
params: Readonly<Record<string, MotionParamValue>>;
|
||||||
|
/** Logo data URIs in brand-kit order. */
|
||||||
|
logos: readonly string[];
|
||||||
|
/** Sanitized font families by role, already falling back across roles. */
|
||||||
|
fonts: { heading: string | null; body: string | null; caption: string | null };
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MotionTemplate {
|
||||||
|
info: MotionTemplateInfo;
|
||||||
|
frame(t: number, ctx: MotionFrameContext): string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class MotionTemplateError extends Error {
|
||||||
|
constructor(
|
||||||
|
readonly code:
|
||||||
|
| "unknown_template"
|
||||||
|
| "unknown_param"
|
||||||
|
| "invalid_param"
|
||||||
|
| "missing_param"
|
||||||
|
| "invalid_duration"
|
||||||
|
| "invalid_size"
|
||||||
|
| "invalid_asset",
|
||||||
|
message: string,
|
||||||
|
) {
|
||||||
|
super(message);
|
||||||
|
this.name = "MotionTemplateError";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const MAX_PARAM_STRING_LENGTH = 200;
|
||||||
|
const MAX_PARAM_NUMBER = 1_000_000;
|
||||||
|
// XML 1.0 cannot carry these at all, escaped or not.
|
||||||
|
// biome-ignore lint/suspicious/noControlCharactersInRegex: the point is to find them.
|
||||||
|
const XML_FORBIDDEN = /[\u0000-\u0008\u000B\u000C\u000E-\u001F]/;
|
||||||
|
const LONE_SURROGATE = /[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?<![\uD800-\uDBFF])[\uDC00-\uDFFF]/;
|
||||||
|
|
||||||
|
/** Check a template reference's params against its declared list. */
|
||||||
|
export function validateParams(
|
||||||
|
info: MotionTemplateInfo,
|
||||||
|
params: MotionTemplateRef["params"],
|
||||||
|
): Record<string, MotionParamValue> {
|
||||||
|
const declared = new Map(info.params.map((param) => [param.name, param]));
|
||||||
|
const result: Record<string, MotionParamValue> = {};
|
||||||
|
for (const [name, value] of Object.entries(params)) {
|
||||||
|
const spec = declared.get(name);
|
||||||
|
if (!spec) throw new MotionTemplateError("unknown_param", `${info.id} has no param "${name}"`);
|
||||||
|
if (spec.type === "string" || spec.type === "color") {
|
||||||
|
if (typeof value !== "string")
|
||||||
|
throw new MotionTemplateError("invalid_param", `${name} must be a string`);
|
||||||
|
if (value.length > MAX_PARAM_STRING_LENGTH)
|
||||||
|
throw new MotionTemplateError("invalid_param", `${name} is too long`);
|
||||||
|
if (XML_FORBIDDEN.test(value) || LONE_SURROGATE.test(value))
|
||||||
|
throw new MotionTemplateError("invalid_param", `${name} contains unsupported characters`);
|
||||||
|
if (spec.type === "color" && !BRAND_COLOR_ROLES.includes(value as BrandColorRole))
|
||||||
|
throw new MotionTemplateError(
|
||||||
|
"invalid_param",
|
||||||
|
`${name} must name a brand color: ${BRAND_COLOR_ROLES.join(", ")}`,
|
||||||
|
);
|
||||||
|
const trimmed = value.trim();
|
||||||
|
if (trimmed === "") continue;
|
||||||
|
result[name] = trimmed;
|
||||||
|
} else if (spec.type === "number") {
|
||||||
|
if (
|
||||||
|
typeof value !== "number" ||
|
||||||
|
!Number.isFinite(value) ||
|
||||||
|
Math.abs(value) > MAX_PARAM_NUMBER
|
||||||
|
)
|
||||||
|
throw new MotionTemplateError("invalid_param", `${name} must be a finite number`);
|
||||||
|
result[name] = value;
|
||||||
|
} else {
|
||||||
|
if (typeof value !== "boolean")
|
||||||
|
throw new MotionTemplateError("invalid_param", `${name} must be a boolean`);
|
||||||
|
result[name] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (const spec of info.params) {
|
||||||
|
if (spec.required && !(spec.name in result))
|
||||||
|
throw new MotionTemplateError("missing_param", `${info.id} needs "${spec.name}"`);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function validateDuration(info: MotionTemplateInfo, durationMs: number): void {
|
||||||
|
if (
|
||||||
|
!Number.isInteger(durationMs) ||
|
||||||
|
durationMs < info.minDurationMs ||
|
||||||
|
durationMs > info.maxDurationMs
|
||||||
|
)
|
||||||
|
throw new MotionTemplateError(
|
||||||
|
"invalid_duration",
|
||||||
|
`${info.id} runs ${info.minDurationMs}..${info.maxDurationMs} ms`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Font family names reach a CSS list inside an attribute; keep them plain. */
|
||||||
|
export function sanitizeFontFamily(family: string): string | null {
|
||||||
|
const clean = family
|
||||||
|
.replace(/[^\p{L}\p{N} _-]/gu, "")
|
||||||
|
.replace(/\s+/g, " ")
|
||||||
|
.trim();
|
||||||
|
return clean === "" ? null : clean.slice(0, 80);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function brandFonts(kit: BrandKit): MotionFrameContext["fonts"] {
|
||||||
|
const byRole = (role: "heading" | "body" | "caption") => {
|
||||||
|
const font = kit.fonts.find((entry) => entry.role === role);
|
||||||
|
return font ? sanitizeFontFamily(font.family) : null;
|
||||||
|
};
|
||||||
|
const heading = byRole("heading");
|
||||||
|
const body = byRole("body");
|
||||||
|
const caption = byRole("caption");
|
||||||
|
return {
|
||||||
|
heading: heading ?? body ?? caption,
|
||||||
|
body: body ?? heading ?? caption,
|
||||||
|
caption: caption ?? body ?? heading,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function escapeXml(value: string): string {
|
||||||
|
return value
|
||||||
|
.replace(/&/g, "&")
|
||||||
|
.replace(/</g, "<")
|
||||||
|
.replace(/>/g, ">")
|
||||||
|
.replace(/"/g, """)
|
||||||
|
.replace(/'/g, "'");
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Round for stable, compact markup. */
|
||||||
|
export function num(value: number): string {
|
||||||
|
const rounded = Math.round(value * 100) / 100;
|
||||||
|
return Object.is(rounded, -0) ? "0" : String(rounded);
|
||||||
|
}
|
||||||
|
|
||||||
|
type Attrs = Record<string, string | number | undefined>;
|
||||||
|
|
||||||
|
function attrs(values: Attrs): string {
|
||||||
|
return Object.entries(values)
|
||||||
|
.filter((entry): entry is [string, string | number] => entry[1] !== undefined)
|
||||||
|
.map(([key, value]) => ` ${key}="${typeof value === "number" ? num(value) : escapeXml(value)}"`)
|
||||||
|
.join("");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function el(name: string, values: Attrs, children = ""): string {
|
||||||
|
return children === ""
|
||||||
|
? `<${name}${attrs(values)}/>`
|
||||||
|
: `<${name}${attrs(values)}>${children}</${name}>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fontStack(family: string | null, generic: "sans-serif" | "serif"): string {
|
||||||
|
return family ? `${family}, ${generic}` : generic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Rough advance width per character relative to font size; deliberately generous. */
|
||||||
|
const CHAR_WIDTH = 0.6;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pick a font size so `text` fits `maxWidth` on one line, shrinking down to
|
||||||
|
* `minSize`; anything still too wide is cut with an ellipsis.
|
||||||
|
*/
|
||||||
|
export function fitText(
|
||||||
|
text: string,
|
||||||
|
maxWidth: number,
|
||||||
|
size: number,
|
||||||
|
minSize: number,
|
||||||
|
letterSpacingEm = 0,
|
||||||
|
): { text: string; size: number } {
|
||||||
|
const chars = [...text];
|
||||||
|
const per = CHAR_WIDTH + letterSpacingEm;
|
||||||
|
const fitted = maxWidth / Math.max(1, chars.length * per);
|
||||||
|
if (fitted >= size) return { text, size };
|
||||||
|
if (fitted >= minSize) return { text, size: fitted };
|
||||||
|
const keep = Math.max(1, Math.floor(maxWidth / (minSize * per)) - 1);
|
||||||
|
return { text: `${chars.slice(0, keep).join("").trimEnd()}…`, size: minSize };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function textEl(content: string, values: Attrs): string {
|
||||||
|
return el("text", values, escapeXml(content) || " ");
|
||||||
|
}
|
||||||
|
|
||||||
|
export function stringParam(ctx: MotionFrameContext, name: string): string | null {
|
||||||
|
const value = ctx.params[name];
|
||||||
|
return typeof value === "string" ? value : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function colorParam(
|
||||||
|
ctx: MotionFrameContext,
|
||||||
|
name: string,
|
||||||
|
fallback: BrandColorRole,
|
||||||
|
): string {
|
||||||
|
const role = stringParam(ctx, name);
|
||||||
|
return ctx.kit.colors[
|
||||||
|
role && BRAND_COLOR_ROLES.includes(role as BrandColorRole) ? (role as BrandColorRole) : fallback
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function logoEl(
|
||||||
|
ctx: MotionFrameContext,
|
||||||
|
box: { x: number; y: number; w: number; h: number },
|
||||||
|
extra: Attrs = {},
|
||||||
|
): string {
|
||||||
|
const href = ctx.logos[0];
|
||||||
|
if (!href) return "";
|
||||||
|
return el("image", {
|
||||||
|
href,
|
||||||
|
x: box.x,
|
||||||
|
y: box.y,
|
||||||
|
width: box.w,
|
||||||
|
height: box.h,
|
||||||
|
preserveAspectRatio: "xMidYMid meet",
|
||||||
|
...extra,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function svgDocument(ctx: MotionFrameContext, body: string, defs = ""): string {
|
||||||
|
const { width, height } = ctx;
|
||||||
|
return (
|
||||||
|
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"` +
|
||||||
|
` width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">` +
|
||||||
|
(defs ? `<defs>${defs}</defs>` : "") +
|
||||||
|
body +
|
||||||
|
"</svg>"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function fullBackground(ctx: MotionFrameContext, opacity = 1): string {
|
||||||
|
return el("rect", {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
width: ctx.width,
|
||||||
|
height: ctx.height,
|
||||||
|
fill: ctx.kit.colors.background,
|
||||||
|
opacity: opacity < 1 ? opacity : undefined,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** A filled, centered call-to-action button in the primary brand color. */
|
||||||
|
export function ctaButton(
|
||||||
|
ctx: MotionFrameContext,
|
||||||
|
label: string,
|
||||||
|
cx: number,
|
||||||
|
cy: number,
|
||||||
|
scale = 1,
|
||||||
|
opacity = 1,
|
||||||
|
): string {
|
||||||
|
const u = unit(ctx);
|
||||||
|
const fitted = fitText(label, ctx.width * 0.7, u * 0.07, u * 0.035);
|
||||||
|
const width = Math.min(ctx.width * 0.8, [...fitted.text].length * fitted.size * 0.6 + u * 0.16);
|
||||||
|
const height = fitted.size * 1.9;
|
||||||
|
return el(
|
||||||
|
"g",
|
||||||
|
{
|
||||||
|
transform: `translate(${num(cx)} ${num(cy)}) scale(${num(Math.max(scale, 0.001))})`,
|
||||||
|
opacity: opacity < 1 ? opacity : undefined,
|
||||||
|
},
|
||||||
|
el("rect", {
|
||||||
|
x: -width / 2,
|
||||||
|
y: -height / 2,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
rx: height / 2,
|
||||||
|
fill: ctx.kit.colors.primary,
|
||||||
|
}) +
|
||||||
|
textEl(fitted.text, {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"dominant-baseline": "central",
|
||||||
|
"font-family": fontStack(ctx.fonts.body, "sans-serif"),
|
||||||
|
"font-weight": 700,
|
||||||
|
"font-size": fitted.size,
|
||||||
|
fill: ctx.kit.colors.background,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Short side of the frame; templates scale type and spacing from it. */
|
||||||
|
export function unit(ctx: MotionFrameContext): number {
|
||||||
|
return Math.min(ctx.width, ctx.height);
|
||||||
|
}
|
||||||
182
packages/adapters/src/media-motion/templates/captions.ts
Normal file
182
packages/adapters/src/media-motion/templates/captions.ts
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
import type { CaptionStylePreset } from "@rakazo/contracts";
|
||||||
|
import { easeInCubic, easeOutBack, easeOutCubic, progress } from "../easing.js";
|
||||||
|
import type { MotionFrameContext, MotionTemplate } from "../template.js";
|
||||||
|
import {
|
||||||
|
el,
|
||||||
|
escapeXml,
|
||||||
|
fontStack,
|
||||||
|
num,
|
||||||
|
sanitizeFontFamily,
|
||||||
|
stringParam,
|
||||||
|
svgDocument,
|
||||||
|
} from "../template.js";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Preview cards for caption presets (brand-kit editor, caption picker). The
|
||||||
|
* burned-in captions of a render come from the compiler's ASS subtitles; these
|
||||||
|
* only need to look like them.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const CAPTION = { kind: "caption", minDurationMs: 1000, maxDurationMs: 10000 } as const;
|
||||||
|
const CAPTION_PARAMS = [
|
||||||
|
{ name: "text", type: "string", required: true },
|
||||||
|
{ name: "presetId", type: "string", required: false },
|
||||||
|
] as const;
|
||||||
|
const MAX_LINES = 2;
|
||||||
|
|
||||||
|
interface CaptionStyle {
|
||||||
|
family: string | null;
|
||||||
|
size: number;
|
||||||
|
text: string;
|
||||||
|
highlight: string;
|
||||||
|
background: string | null;
|
||||||
|
uppercase: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function captionStyle(
|
||||||
|
ctx: MotionFrameContext,
|
||||||
|
template: CaptionStylePreset["template"],
|
||||||
|
): CaptionStyle {
|
||||||
|
const presetId = stringParam(ctx, "presetId");
|
||||||
|
const presets = ctx.kit.captionPresets;
|
||||||
|
const preset =
|
||||||
|
(presetId ? presets.find((entry) => entry.id === presetId) : undefined) ??
|
||||||
|
presets.find((entry) => entry.template === template);
|
||||||
|
const { colors } = ctx.kit;
|
||||||
|
return {
|
||||||
|
family: preset ? sanitizeFontFamily(preset.fontFamily) : ctx.fonts.caption,
|
||||||
|
size: (ctx.height * (preset?.sizePct ?? (template === "bold_social" ? 7 : 5.5))) / 100,
|
||||||
|
text: preset?.textColor ?? colors.text,
|
||||||
|
highlight: preset?.highlightColor ?? colors.accent,
|
||||||
|
background: preset
|
||||||
|
? (preset.backgroundColor ?? null)
|
||||||
|
: template === "clean"
|
||||||
|
? colors.background
|
||||||
|
: null,
|
||||||
|
uppercase: preset?.uppercase ?? template === "bold_social",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Greedy word wrap into at most MAX_LINES lines that fit `maxWidth`. */
|
||||||
|
function wrapWords(words: string[], size: number, maxWidth: number): string[][] {
|
||||||
|
const maxChars = Math.max(4, Math.floor(maxWidth / (size * 0.6)));
|
||||||
|
const lines: string[][] = [[]];
|
||||||
|
let length = 0;
|
||||||
|
for (const raw of words) {
|
||||||
|
const word = [...raw].length > maxChars ? `${[...raw].slice(0, maxChars - 1).join("")}…` : raw;
|
||||||
|
const current = lines[lines.length - 1]!;
|
||||||
|
const added = (current.length > 0 ? 1 : 0) + [...word].length;
|
||||||
|
if (current.length > 0 && length + added > maxChars) {
|
||||||
|
if (lines.length === MAX_LINES) {
|
||||||
|
current[current.length - 1] = `${current[current.length - 1]}…`;
|
||||||
|
return lines;
|
||||||
|
}
|
||||||
|
lines.push([word]);
|
||||||
|
length = [...word].length;
|
||||||
|
} else {
|
||||||
|
current.push(word);
|
||||||
|
length += added;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return lines;
|
||||||
|
}
|
||||||
|
|
||||||
|
function captionFrame(
|
||||||
|
t: number,
|
||||||
|
ctx: MotionFrameContext,
|
||||||
|
template: CaptionStylePreset["template"],
|
||||||
|
): string {
|
||||||
|
const style = captionStyle(ctx, template);
|
||||||
|
const raw = stringParam(ctx, "text") ?? "";
|
||||||
|
const words = (style.uppercase ? raw.toUpperCase() : raw).split(/\s+/).filter(Boolean);
|
||||||
|
const lines = wrapWords(words, style.size, ctx.width * 0.84);
|
||||||
|
const enter = progress(t, 0, Math.min(250, ctx.durationMs * 0.2));
|
||||||
|
const leave = easeInCubic(
|
||||||
|
progress(t, ctx.durationMs - Math.min(200, ctx.durationMs * 0.15), ctx.durationMs),
|
||||||
|
);
|
||||||
|
const total = lines.reduce((sum, line) => sum + line.length, 0);
|
||||||
|
// Karaoke and bold styles move a highlight through the words across the hold.
|
||||||
|
const active =
|
||||||
|
template === "clean"
|
||||||
|
? -1
|
||||||
|
: Math.min(
|
||||||
|
total - 1,
|
||||||
|
Math.floor(progress(t, ctx.durationMs * 0.1, ctx.durationMs * 0.9) * total),
|
||||||
|
);
|
||||||
|
const lineHeight = style.size * 1.25;
|
||||||
|
const baseY = ctx.height * 0.84 - (lines.length - 1) * lineHeight;
|
||||||
|
let wordIndex = 0;
|
||||||
|
const rendered = lines.map((line, row) => {
|
||||||
|
const spans = line.map((word, column) => {
|
||||||
|
const index = wordIndex++;
|
||||||
|
const fill =
|
||||||
|
template === "karaoke"
|
||||||
|
? index <= active
|
||||||
|
? style.highlight
|
||||||
|
: style.text
|
||||||
|
: template === "bold_social" && index === active
|
||||||
|
? style.highlight
|
||||||
|
: style.text;
|
||||||
|
return el("tspan", { fill }, escapeXml(column < line.length - 1 ? `${word} ` : word));
|
||||||
|
});
|
||||||
|
return el(
|
||||||
|
"text",
|
||||||
|
{
|
||||||
|
x: ctx.width / 2,
|
||||||
|
y: baseY + row * lineHeight,
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"font-family": fontStack(style.family, "sans-serif"),
|
||||||
|
"font-weight": template === "bold_social" ? 900 : 600,
|
||||||
|
"font-size": style.size,
|
||||||
|
stroke: template === "bold_social" ? ctx.kit.colors.background : undefined,
|
||||||
|
"stroke-width": template === "bold_social" ? style.size * 0.12 : undefined,
|
||||||
|
"stroke-linejoin": template === "bold_social" ? "round" : undefined,
|
||||||
|
"paint-order": template === "bold_social" ? "stroke" : undefined,
|
||||||
|
},
|
||||||
|
spans.join("") || " ",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
const longest = Math.max(1, ...lines.map((line) => [...line.join(" ")].length));
|
||||||
|
const plate = style.background
|
||||||
|
? el("rect", {
|
||||||
|
x: ctx.width / 2 - (longest * style.size * 0.6) / 2 - style.size * 0.5,
|
||||||
|
y: baseY - style.size * 1.05,
|
||||||
|
width: longest * style.size * 0.6 + style.size,
|
||||||
|
height: lines.length * lineHeight + style.size * 0.45,
|
||||||
|
rx: style.size * 0.25,
|
||||||
|
fill: style.background,
|
||||||
|
opacity: 0.75,
|
||||||
|
})
|
||||||
|
: "";
|
||||||
|
const scale = template === "bold_social" ? (enter <= 0 ? 0.001 : easeOutBack(enter)) : 1;
|
||||||
|
const originY = ctx.height * 0.84;
|
||||||
|
return svgDocument(
|
||||||
|
ctx,
|
||||||
|
el(
|
||||||
|
"g",
|
||||||
|
{
|
||||||
|
opacity: (template === "bold_social" ? 1 : easeOutCubic(enter)) * (1 - leave),
|
||||||
|
transform:
|
||||||
|
scale === 1
|
||||||
|
? undefined
|
||||||
|
: `translate(${num(ctx.width / 2)} ${num(originY)}) scale(${num(scale)}) translate(${num(-ctx.width / 2)} ${num(-originY)})`,
|
||||||
|
},
|
||||||
|
plate + rendered.join(""),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const captionClean: MotionTemplate = {
|
||||||
|
info: { id: "caption_clean", name: "Clean", ...CAPTION, params: [...CAPTION_PARAMS] },
|
||||||
|
frame: (t, ctx) => captionFrame(t, ctx, "clean"),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const captionKaraoke: MotionTemplate = {
|
||||||
|
info: { id: "caption_karaoke", name: "Karaoke", ...CAPTION, params: [...CAPTION_PARAMS] },
|
||||||
|
frame: (t, ctx) => captionFrame(t, ctx, "karaoke"),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const captionBoldSocial: MotionTemplate = {
|
||||||
|
info: { id: "caption_bold_social", name: "Bold social", ...CAPTION, params: [...CAPTION_PARAMS] },
|
||||||
|
frame: (t, ctx) => captionFrame(t, ctx, "bold_social"),
|
||||||
|
};
|
||||||
153
packages/adapters/src/media-motion/templates/end-cards.ts
Normal file
153
packages/adapters/src/media-motion/templates/end-cards.ts
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
import { easeOutBack, easeOutCubic, progress } from "../easing.js";
|
||||||
|
import type { MotionFrameContext, MotionTemplate } from "../template.js";
|
||||||
|
import {
|
||||||
|
ctaButton,
|
||||||
|
fitText,
|
||||||
|
fontStack,
|
||||||
|
fullBackground,
|
||||||
|
logoEl,
|
||||||
|
stringParam,
|
||||||
|
svgDocument,
|
||||||
|
textEl,
|
||||||
|
unit,
|
||||||
|
} from "../template.js";
|
||||||
|
|
||||||
|
const END_CARD = { kind: "end_card", minDurationMs: 3000, maxDurationMs: 10000 } as const;
|
||||||
|
|
||||||
|
/** Staggered rise-in for the n-th element of a card. */
|
||||||
|
function rise(t: number, ctx: MotionFrameContext, index: number): number {
|
||||||
|
const start = ctx.durationMs * (0.05 + index * 0.08);
|
||||||
|
return easeOutCubic(progress(t, start, start + ctx.durationMs * 0.18));
|
||||||
|
}
|
||||||
|
|
||||||
|
export const endCardCta: MotionTemplate = {
|
||||||
|
info: {
|
||||||
|
id: "endcard_cta",
|
||||||
|
name: "Call to action",
|
||||||
|
...END_CARD,
|
||||||
|
params: [
|
||||||
|
{ name: "headline", type: "string", required: true },
|
||||||
|
{ name: "cta", type: "string", required: true },
|
||||||
|
{ name: "price", type: "string", required: false },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
frame(t, ctx) {
|
||||||
|
const u = unit(ctx);
|
||||||
|
const cx = ctx.width / 2;
|
||||||
|
const hasLogo = ctx.logos.length > 0;
|
||||||
|
const logoSize = u * 0.16;
|
||||||
|
const top = ctx.height * (hasLogo ? 0.2 : 0.3);
|
||||||
|
const logoAppear = rise(t, ctx, 0);
|
||||||
|
const logo = logoEl(
|
||||||
|
ctx,
|
||||||
|
{ x: cx - logoSize / 2, y: top, w: logoSize, h: logoSize },
|
||||||
|
{ opacity: logoAppear },
|
||||||
|
);
|
||||||
|
const headlineY = top + (hasLogo ? logoSize + u * 0.12 : u * 0.05);
|
||||||
|
const headline = fitText(
|
||||||
|
stringParam(ctx, "headline") ?? "",
|
||||||
|
ctx.width * 0.84,
|
||||||
|
u * 0.09,
|
||||||
|
u * 0.04,
|
||||||
|
);
|
||||||
|
const headlineAppear = rise(t, ctx, 1);
|
||||||
|
let y = headlineY;
|
||||||
|
let body =
|
||||||
|
fullBackground(ctx) +
|
||||||
|
logo +
|
||||||
|
textEl(headline.text, {
|
||||||
|
x: cx,
|
||||||
|
y: y + (1 - headlineAppear) * u * 0.04,
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"font-family": fontStack(ctx.fonts.heading, "sans-serif"),
|
||||||
|
"font-weight": 800,
|
||||||
|
"font-size": headline.size,
|
||||||
|
fill: ctx.kit.colors.text,
|
||||||
|
opacity: headlineAppear,
|
||||||
|
});
|
||||||
|
const price = stringParam(ctx, "price");
|
||||||
|
if (price) {
|
||||||
|
const fitted = fitText(price, ctx.width * 0.7, u * 0.055, u * 0.03);
|
||||||
|
const appear = rise(t, ctx, 2);
|
||||||
|
y += u * 0.1;
|
||||||
|
body += textEl(fitted.text, {
|
||||||
|
x: cx,
|
||||||
|
y: y + (1 - appear) * u * 0.03,
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"font-family": fontStack(ctx.fonts.body, "sans-serif"),
|
||||||
|
"font-weight": 600,
|
||||||
|
"font-size": fitted.size,
|
||||||
|
fill: ctx.kit.colors.accent,
|
||||||
|
opacity: appear,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const pop = progress(t, ctx.durationMs * 0.3, ctx.durationMs * 0.45);
|
||||||
|
body += ctaButton(
|
||||||
|
ctx,
|
||||||
|
stringParam(ctx, "cta") ?? "",
|
||||||
|
cx,
|
||||||
|
y + u * 0.17,
|
||||||
|
pop <= 0 ? 0 : easeOutBack(pop),
|
||||||
|
);
|
||||||
|
return svgDocument(ctx, body);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const endCardMinimal: MotionTemplate = {
|
||||||
|
info: {
|
||||||
|
id: "endcard_minimal",
|
||||||
|
name: "Minimal",
|
||||||
|
...END_CARD,
|
||||||
|
params: [
|
||||||
|
{ name: "headline", type: "string", required: false },
|
||||||
|
{ name: "url", type: "string", required: false },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
frame(t, ctx) {
|
||||||
|
const u = unit(ctx);
|
||||||
|
const cx = ctx.width / 2;
|
||||||
|
const size = u * 0.22;
|
||||||
|
const cy = ctx.height * 0.4;
|
||||||
|
const appear = rise(t, ctx, 0);
|
||||||
|
const logo = logoEl(
|
||||||
|
ctx,
|
||||||
|
{ x: cx - size / 2, y: cy - size / 2, w: size, h: size },
|
||||||
|
{ opacity: appear },
|
||||||
|
);
|
||||||
|
const headline = fitText(
|
||||||
|
stringParam(ctx, "headline") ?? ctx.kit.name,
|
||||||
|
ctx.width * 0.8,
|
||||||
|
u * 0.075,
|
||||||
|
u * 0.035,
|
||||||
|
);
|
||||||
|
const headlineY = ctx.logos.length > 0 ? cy + size / 2 + u * 0.1 : cy + u * 0.04;
|
||||||
|
const headlineAppear = rise(t, ctx, 1);
|
||||||
|
let body =
|
||||||
|
fullBackground(ctx) +
|
||||||
|
logo +
|
||||||
|
textEl(headline.text, {
|
||||||
|
x: cx,
|
||||||
|
y: headlineY,
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"font-family": fontStack(ctx.fonts.heading, "sans-serif"),
|
||||||
|
"font-weight": 600,
|
||||||
|
"font-size": headline.size,
|
||||||
|
fill: ctx.kit.colors.text,
|
||||||
|
opacity: headlineAppear,
|
||||||
|
});
|
||||||
|
const url = stringParam(ctx, "url");
|
||||||
|
if (url) {
|
||||||
|
const fitted = fitText(url, ctx.width * 0.8, u * 0.045, u * 0.025);
|
||||||
|
body += textEl(fitted.text, {
|
||||||
|
x: cx,
|
||||||
|
y: headlineY + u * 0.09,
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"font-family": fontStack(ctx.fonts.body, "sans-serif"),
|
||||||
|
"font-size": fitted.size,
|
||||||
|
fill: ctx.kit.colors.secondary,
|
||||||
|
opacity: rise(t, ctx, 2),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return svgDocument(ctx, body);
|
||||||
|
},
|
||||||
|
};
|
||||||
309
packages/adapters/src/media-motion/templates/intros.ts
Normal file
309
packages/adapters/src/media-motion/templates/intros.ts
Normal file
@ -0,0 +1,309 @@
|
|||||||
|
import {
|
||||||
|
clamp,
|
||||||
|
easeInOutCubic,
|
||||||
|
easeOutBack,
|
||||||
|
easeOutCubic,
|
||||||
|
easeOutExpo,
|
||||||
|
fadeEnvelope,
|
||||||
|
hash01,
|
||||||
|
lerp,
|
||||||
|
progress,
|
||||||
|
} from "../easing.js";
|
||||||
|
import type { MotionFrameContext, MotionTemplate } from "../template.js";
|
||||||
|
import {
|
||||||
|
el,
|
||||||
|
escapeXml,
|
||||||
|
fitText,
|
||||||
|
fontStack,
|
||||||
|
fullBackground,
|
||||||
|
logoEl,
|
||||||
|
num,
|
||||||
|
stringParam,
|
||||||
|
svgDocument,
|
||||||
|
textEl,
|
||||||
|
unit,
|
||||||
|
} from "../template.js";
|
||||||
|
|
||||||
|
const INTRO_PARAMS = [
|
||||||
|
{ name: "title", type: "string", required: false },
|
||||||
|
{ name: "tagline", type: "string", required: false },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
function title(ctx: MotionFrameContext): string {
|
||||||
|
return stringParam(ctx, "title") ?? ctx.kit.name;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Fades the whole intro, background included, so it hands over to the video. */
|
||||||
|
function outro(t: number, ctx: MotionFrameContext): number {
|
||||||
|
return fadeEnvelope(t, ctx.durationMs, 0, Math.min(400, ctx.durationMs * 0.15));
|
||||||
|
}
|
||||||
|
|
||||||
|
function tagline(ctx: MotionFrameContext, t: number, y: number, startPct: number): string {
|
||||||
|
const text = stringParam(ctx, "tagline");
|
||||||
|
if (!text) return "";
|
||||||
|
const appear = easeOutCubic(
|
||||||
|
progress(t, ctx.durationMs * startPct, ctx.durationMs * (startPct + 0.2)),
|
||||||
|
);
|
||||||
|
const fitted = fitText(text, ctx.width * 0.8, unit(ctx) * 0.055, unit(ctx) * 0.03);
|
||||||
|
return textEl(fitted.text, {
|
||||||
|
x: ctx.width / 2,
|
||||||
|
y: y + (1 - appear) * unit(ctx) * 0.03,
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"font-family": fontStack(ctx.fonts.body, "sans-serif"),
|
||||||
|
"font-size": fitted.size,
|
||||||
|
fill: ctx.kit.colors.text,
|
||||||
|
opacity: appear,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export const introLogoReveal: MotionTemplate = {
|
||||||
|
info: {
|
||||||
|
id: "intro_logo_reveal",
|
||||||
|
kind: "intro",
|
||||||
|
name: "Logo reveal",
|
||||||
|
minDurationMs: 1500,
|
||||||
|
maxDurationMs: 4000,
|
||||||
|
params: [...INTRO_PARAMS],
|
||||||
|
},
|
||||||
|
frame(t, ctx) {
|
||||||
|
const u = unit(ctx);
|
||||||
|
const cx = ctx.width / 2;
|
||||||
|
const cy = ctx.height * 0.46;
|
||||||
|
const d = ctx.durationMs;
|
||||||
|
const circle = easeOutExpo(progress(t, 0, d * 0.3));
|
||||||
|
const pop = progress(t, d * 0.18, d * 0.48);
|
||||||
|
const scale = pop <= 0 ? 0 : easeOutBack(pop);
|
||||||
|
const radius = u * 0.24;
|
||||||
|
let mark: string;
|
||||||
|
if (ctx.logos.length > 0) {
|
||||||
|
const size = radius * 1.3 * scale;
|
||||||
|
mark = logoEl(ctx, { x: cx - size / 2, y: cy - size / 2, w: size, h: size });
|
||||||
|
} else {
|
||||||
|
const fitted = fitText(title(ctx), ctx.width * 0.8, u * 0.14, u * 0.05);
|
||||||
|
mark = textEl(fitted.text, {
|
||||||
|
x: cx,
|
||||||
|
y: cy,
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"dominant-baseline": "central",
|
||||||
|
"font-family": fontStack(ctx.fonts.heading, "sans-serif"),
|
||||||
|
"font-weight": 700,
|
||||||
|
"font-size": fitted.size * Math.max(scale, 0.001),
|
||||||
|
fill: ctx.kit.colors.text,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const ring = el("circle", {
|
||||||
|
cx,
|
||||||
|
cy,
|
||||||
|
r: Math.max(radius * circle, 0.01),
|
||||||
|
fill: ctx.logos.length > 0 ? ctx.kit.colors.primary : "none",
|
||||||
|
stroke: ctx.kit.colors.accent,
|
||||||
|
"stroke-width": u * 0.01,
|
||||||
|
opacity: ctx.logos.length > 0 ? 1 : 0.9,
|
||||||
|
});
|
||||||
|
const body = fullBackground(ctx) + ring + mark + tagline(ctx, t, cy + radius + u * 0.12, 0.42);
|
||||||
|
return svgDocument(ctx, el("g", { opacity: outro(t, ctx) }, body));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const introKineticType: MotionTemplate = {
|
||||||
|
info: {
|
||||||
|
id: "intro_kinetic_type",
|
||||||
|
kind: "intro",
|
||||||
|
name: "Kinetic type",
|
||||||
|
minDurationMs: 1500,
|
||||||
|
maxDurationMs: 4000,
|
||||||
|
params: [...INTRO_PARAMS],
|
||||||
|
},
|
||||||
|
frame(t, ctx) {
|
||||||
|
const u = unit(ctx);
|
||||||
|
const d = ctx.durationMs;
|
||||||
|
const fitted = fitText(title(ctx), ctx.width * 0.86, u * 0.16, u * 0.05);
|
||||||
|
const words = fitted.text.split(/\s+/).filter(Boolean).slice(0, 12);
|
||||||
|
const stagger = (d * 0.35) / Math.max(words.length, 1);
|
||||||
|
const baseY = ctx.height * 0.48;
|
||||||
|
let previousOffset = 0;
|
||||||
|
const spans = words.map((word, index) => {
|
||||||
|
const appear = easeOutExpo(progress(t, index * stagger, index * stagger + d * 0.25));
|
||||||
|
const offset = (1 - appear) * u * 0.18;
|
||||||
|
const dy = offset - previousOffset;
|
||||||
|
previousOffset = offset;
|
||||||
|
const last = index === words.length - 1 && words.length > 1;
|
||||||
|
return el(
|
||||||
|
"tspan",
|
||||||
|
{
|
||||||
|
dy,
|
||||||
|
fill: last ? ctx.kit.colors.primary : ctx.kit.colors.text,
|
||||||
|
"fill-opacity": clamp(appear * 1.4),
|
||||||
|
},
|
||||||
|
escapeXml(index === words.length - 1 ? word : `${word} `),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
const heading = el(
|
||||||
|
"text",
|
||||||
|
{
|
||||||
|
x: ctx.width / 2,
|
||||||
|
y: baseY,
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"font-family": fontStack(ctx.fonts.heading, "sans-serif"),
|
||||||
|
"font-weight": 800,
|
||||||
|
"font-size": fitted.size,
|
||||||
|
},
|
||||||
|
spans.join("") || " ",
|
||||||
|
);
|
||||||
|
const barGrow = easeInOutCubic(progress(t, d * 0.3, d * 0.6));
|
||||||
|
const barWidth = ctx.width * 0.3 * barGrow;
|
||||||
|
const bar = el("rect", {
|
||||||
|
x: ctx.width / 2 - barWidth / 2,
|
||||||
|
y: baseY + fitted.size * 0.3,
|
||||||
|
width: barWidth,
|
||||||
|
height: u * 0.012,
|
||||||
|
fill: ctx.kit.colors.accent,
|
||||||
|
});
|
||||||
|
const body = fullBackground(ctx) + heading + bar + tagline(ctx, t, baseY + u * 0.16, 0.45);
|
||||||
|
return svgDocument(ctx, el("g", { opacity: outro(t, ctx) }, body));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Glitch bursts are scheduled at a fixed 2 Hz. Photosensitivity guidance
|
||||||
|
* (WCAG 2.3.1) allows at most three flashes per second; the template never
|
||||||
|
* changes full-frame brightness, and the bursts stay below that rate even if
|
||||||
|
* they were counted as flashes.
|
||||||
|
*/
|
||||||
|
export const GLITCH_BURST_INTERVAL_MS = 500;
|
||||||
|
const GLITCH_BURST_MS = 120;
|
||||||
|
const GLITCH_SLICES = 6;
|
||||||
|
|
||||||
|
export const introGlitch: MotionTemplate = {
|
||||||
|
info: {
|
||||||
|
id: "intro_glitch",
|
||||||
|
kind: "intro",
|
||||||
|
name: "Glitch",
|
||||||
|
minDurationMs: 1500,
|
||||||
|
maxDurationMs: 4000,
|
||||||
|
params: [...INTRO_PARAMS],
|
||||||
|
},
|
||||||
|
frame(t, ctx) {
|
||||||
|
const u = unit(ctx);
|
||||||
|
const d = ctx.durationMs;
|
||||||
|
const fitted = fitText(title(ctx).toUpperCase(), ctx.width * 0.84, u * 0.15, u * 0.05);
|
||||||
|
const cy = ctx.height * 0.47;
|
||||||
|
const burstIndex = Math.floor((t - 200) / GLITCH_BURST_INTERVAL_MS);
|
||||||
|
const inBurst =
|
||||||
|
t >= 200 && t - 200 - burstIndex * GLITCH_BURST_INTERVAL_MS < GLITCH_BURST_MS && t < d * 0.85;
|
||||||
|
const reveal = easeOutCubic(progress(t, 0, d * 0.25));
|
||||||
|
const textAttrs = {
|
||||||
|
x: ctx.width / 2,
|
||||||
|
y: cy,
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"dominant-baseline": "central",
|
||||||
|
"font-family": fontStack(ctx.fonts.heading, "sans-serif"),
|
||||||
|
"font-weight": 900,
|
||||||
|
"font-size": fitted.size,
|
||||||
|
};
|
||||||
|
const bandTop = cy - fitted.size * 0.7;
|
||||||
|
const bandHeight = fitted.size * 1.4;
|
||||||
|
const sliceHeight = bandHeight / GLITCH_SLICES;
|
||||||
|
const defs = [
|
||||||
|
el(
|
||||||
|
"clipPath",
|
||||||
|
{ id: "reveal" },
|
||||||
|
el("rect", { x: 0, y: 0, width: ctx.width * reveal, height: ctx.height }),
|
||||||
|
),
|
||||||
|
...Array.from({ length: GLITCH_SLICES }, (_, index) =>
|
||||||
|
el(
|
||||||
|
"clipPath",
|
||||||
|
{ id: `slice${index}` },
|
||||||
|
el("rect", {
|
||||||
|
x: 0,
|
||||||
|
y: bandTop + index * sliceHeight,
|
||||||
|
width: ctx.width,
|
||||||
|
height: sliceHeight,
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
].join("");
|
||||||
|
let title_: string;
|
||||||
|
if (inBurst) {
|
||||||
|
const split = u * 0.012;
|
||||||
|
const ghosts =
|
||||||
|
textEl(fitted.text, {
|
||||||
|
...textAttrs,
|
||||||
|
x: ctx.width / 2 - split,
|
||||||
|
fill: ctx.kit.colors.primary,
|
||||||
|
opacity: 0.8,
|
||||||
|
}) +
|
||||||
|
textEl(fitted.text, {
|
||||||
|
...textAttrs,
|
||||||
|
x: ctx.width / 2 + split,
|
||||||
|
fill: ctx.kit.colors.accent,
|
||||||
|
opacity: 0.8,
|
||||||
|
});
|
||||||
|
const slices = Array.from({ length: GLITCH_SLICES }, (_, index) => {
|
||||||
|
const shift = (hash01(burstIndex, index) - 0.5) * u * 0.08;
|
||||||
|
return el(
|
||||||
|
"g",
|
||||||
|
{ "clip-path": `url(#slice${index})`, transform: `translate(${num(shift)} 0)` },
|
||||||
|
textEl(fitted.text, { ...textAttrs, fill: ctx.kit.colors.text }),
|
||||||
|
);
|
||||||
|
}).join("");
|
||||||
|
title_ = ghosts + slices;
|
||||||
|
} else {
|
||||||
|
title_ = textEl(fitted.text, { ...textAttrs, fill: ctx.kit.colors.text });
|
||||||
|
}
|
||||||
|
const scan = el("rect", {
|
||||||
|
x: 0,
|
||||||
|
y: lerp(bandTop, bandTop + bandHeight, (t % 900) / 900),
|
||||||
|
width: ctx.width * reveal,
|
||||||
|
height: u * 0.004,
|
||||||
|
fill: ctx.kit.colors.accent,
|
||||||
|
opacity: 0.6,
|
||||||
|
});
|
||||||
|
const body =
|
||||||
|
fullBackground(ctx) +
|
||||||
|
el("g", { "clip-path": "url(#reveal)" }, title_ + scan) +
|
||||||
|
tagline(ctx, t, cy + fitted.size * 0.7 + u * 0.08, 0.4);
|
||||||
|
return svgDocument(ctx, el("g", { opacity: outro(t, ctx) }, body), defs);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const introElegantFade: MotionTemplate = {
|
||||||
|
info: {
|
||||||
|
id: "intro_elegant_fade",
|
||||||
|
kind: "intro",
|
||||||
|
name: "Elegant fade",
|
||||||
|
minDurationMs: 1500,
|
||||||
|
maxDurationMs: 4000,
|
||||||
|
params: [...INTRO_PARAMS],
|
||||||
|
},
|
||||||
|
frame(t, ctx) {
|
||||||
|
const u = unit(ctx);
|
||||||
|
const d = ctx.durationMs;
|
||||||
|
const cy = ctx.height * 0.46;
|
||||||
|
const line = easeInOutCubic(progress(t, 0, d * 0.4));
|
||||||
|
const appear = easeOutCubic(progress(t, d * 0.15, d * 0.6));
|
||||||
|
const spacing = lerp(0.4, 0.15, appear);
|
||||||
|
const fitted = fitText(title(ctx), ctx.width * 0.8, u * 0.11, u * 0.04, spacing);
|
||||||
|
const heading = textEl(fitted.text, {
|
||||||
|
x: ctx.width / 2,
|
||||||
|
y: cy - u * 0.03 + (1 - appear) * u * 0.02,
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"font-family": fontStack(ctx.fonts.heading, "serif"),
|
||||||
|
"font-weight": 400,
|
||||||
|
"font-size": fitted.size,
|
||||||
|
"letter-spacing": `${num(spacing)}em`,
|
||||||
|
fill: ctx.kit.colors.text,
|
||||||
|
opacity: appear,
|
||||||
|
});
|
||||||
|
const lineWidth = ctx.width * 0.4 * line;
|
||||||
|
const rule = el("rect", {
|
||||||
|
x: ctx.width / 2 - lineWidth / 2,
|
||||||
|
y: cy + u * 0.02,
|
||||||
|
width: lineWidth,
|
||||||
|
height: Math.max(1, u * 0.003),
|
||||||
|
fill: ctx.kit.colors.accent,
|
||||||
|
});
|
||||||
|
const body = fullBackground(ctx) + heading + rule + tagline(ctx, t, cy + u * 0.12, 0.5);
|
||||||
|
return svgDocument(ctx, el("g", { opacity: outro(t, ctx) }, body));
|
||||||
|
},
|
||||||
|
};
|
||||||
245
packages/adapters/src/media-motion/templates/lower-thirds.ts
Normal file
245
packages/adapters/src/media-motion/templates/lower-thirds.ts
Normal file
@ -0,0 +1,245 @@
|
|||||||
|
import { easeInCubic, easeOutBack, easeOutCubic, progress } from "../easing.js";
|
||||||
|
import type { MotionFrameContext, MotionTemplate } from "../template.js";
|
||||||
|
import {
|
||||||
|
colorParam,
|
||||||
|
el,
|
||||||
|
fitText,
|
||||||
|
fontStack,
|
||||||
|
num,
|
||||||
|
stringParam,
|
||||||
|
svgDocument,
|
||||||
|
textEl,
|
||||||
|
unit,
|
||||||
|
} from "../template.js";
|
||||||
|
|
||||||
|
const LOWER_THIRD = {
|
||||||
|
kind: "lower_third",
|
||||||
|
minDurationMs: 2000,
|
||||||
|
maxDurationMs: 10000,
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
const TEXT_PARAMS = [
|
||||||
|
{ name: "title", type: "string", required: true },
|
||||||
|
{ name: "subtitle", type: "string", required: false },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
/** 0 → 1 while entering, 1 while held, 1 → 0 while leaving. */
|
||||||
|
function presence(t: number, ctx: MotionFrameContext): { enter: number; leave: number } {
|
||||||
|
return {
|
||||||
|
enter: progress(t, 0, Math.min(600, ctx.durationMs * 0.25)),
|
||||||
|
leave: easeInCubic(
|
||||||
|
progress(t, ctx.durationMs - Math.min(400, ctx.durationMs * 0.2), ctx.durationMs),
|
||||||
|
),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function lines(ctx: MotionFrameContext, maxWidth: number) {
|
||||||
|
const u = unit(ctx);
|
||||||
|
const title = fitText(stringParam(ctx, "title") ?? "", maxWidth, u * 0.06, u * 0.03);
|
||||||
|
const subtitleText = stringParam(ctx, "subtitle");
|
||||||
|
const subtitle = subtitleText ? fitText(subtitleText, maxWidth, u * 0.04, u * 0.025) : null;
|
||||||
|
return { title, subtitle };
|
||||||
|
}
|
||||||
|
|
||||||
|
function textWidth(text: string, size: number): number {
|
||||||
|
return [...text].length * size * 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const lowerThirdClean: MotionTemplate = {
|
||||||
|
info: { id: "lt_clean", name: "Clean", ...LOWER_THIRD, params: [...TEXT_PARAMS] },
|
||||||
|
frame(t, ctx) {
|
||||||
|
const u = unit(ctx);
|
||||||
|
const { enter, leave } = presence(t, ctx);
|
||||||
|
const x = ctx.width * 0.07;
|
||||||
|
const y = ctx.height * 0.8;
|
||||||
|
const { title, subtitle } = lines(ctx, ctx.width * 0.6);
|
||||||
|
const appear = easeOutCubic(enter) * (1 - leave);
|
||||||
|
const slide = (1 - easeOutCubic(enter)) * -u * 0.05;
|
||||||
|
const accentHeight = (title.size + (subtitle ? subtitle.size * 1.4 : 0)) * easeOutCubic(enter);
|
||||||
|
const plateWidth =
|
||||||
|
Math.max(
|
||||||
|
textWidth(title.text, title.size),
|
||||||
|
subtitle ? textWidth(subtitle.text, subtitle.size) : 0,
|
||||||
|
) +
|
||||||
|
u * 0.08;
|
||||||
|
const plateHeight = title.size * 1.5 + (subtitle ? subtitle.size * 1.5 : 0);
|
||||||
|
const body =
|
||||||
|
el("rect", {
|
||||||
|
x: x - u * 0.02,
|
||||||
|
y: y - title.size * 1.15,
|
||||||
|
width: plateWidth,
|
||||||
|
height: plateHeight,
|
||||||
|
rx: u * 0.008,
|
||||||
|
fill: ctx.kit.colors.background,
|
||||||
|
opacity: 0.55,
|
||||||
|
}) +
|
||||||
|
el("rect", {
|
||||||
|
x: x - u * 0.02,
|
||||||
|
y: y - title.size * 1.15,
|
||||||
|
width: u * 0.008,
|
||||||
|
height: accentHeight + title.size * 0.5,
|
||||||
|
fill: ctx.kit.colors.accent,
|
||||||
|
}) +
|
||||||
|
textEl(title.text, {
|
||||||
|
x: x + u * 0.01,
|
||||||
|
y,
|
||||||
|
"font-family": fontStack(ctx.fonts.heading, "sans-serif"),
|
||||||
|
"font-weight": 700,
|
||||||
|
"font-size": title.size,
|
||||||
|
fill: ctx.kit.colors.text,
|
||||||
|
}) +
|
||||||
|
(subtitle
|
||||||
|
? textEl(subtitle.text, {
|
||||||
|
x: x + u * 0.01,
|
||||||
|
y: y + subtitle.size * 1.4,
|
||||||
|
"font-family": fontStack(ctx.fonts.body, "sans-serif"),
|
||||||
|
"font-size": subtitle.size,
|
||||||
|
fill: ctx.kit.colors.text,
|
||||||
|
})
|
||||||
|
: "");
|
||||||
|
return svgDocument(
|
||||||
|
ctx,
|
||||||
|
el("g", { opacity: appear, transform: `translate(${num(slide)} 0)` }, body),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const lowerThirdBar: MotionTemplate = {
|
||||||
|
info: {
|
||||||
|
id: "lt_bar",
|
||||||
|
name: "Bar",
|
||||||
|
...LOWER_THIRD,
|
||||||
|
params: [...TEXT_PARAMS, { name: "barColor", type: "color", required: false }],
|
||||||
|
},
|
||||||
|
frame(t, ctx) {
|
||||||
|
const u = unit(ctx);
|
||||||
|
const { enter, leave } = presence(t, ctx);
|
||||||
|
const x = ctx.width * 0.06;
|
||||||
|
const y = ctx.height * 0.76;
|
||||||
|
const { title, subtitle } = lines(ctx, ctx.width * 0.6);
|
||||||
|
const sweep = easeOutCubic(enter) * (1 - leave);
|
||||||
|
const barWidth = (textWidth(title.text, title.size) + u * 0.08) * sweep;
|
||||||
|
const barHeight = title.size * 1.6;
|
||||||
|
const subWidth = subtitle ? (textWidth(subtitle.text, subtitle.size) + u * 0.06) * sweep : 0;
|
||||||
|
const textOpacity =
|
||||||
|
easeOutCubic(progress(t, ctx.durationMs * 0.08, ctx.durationMs * 0.2)) * (1 - leave);
|
||||||
|
const body =
|
||||||
|
el("clipPath", { id: "bar" }, el("rect", { x, y, width: barWidth, height: barHeight })) +
|
||||||
|
el("rect", {
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
width: barWidth,
|
||||||
|
height: barHeight,
|
||||||
|
fill: colorParam(ctx, "barColor", "primary"),
|
||||||
|
}) +
|
||||||
|
textEl(title.text, {
|
||||||
|
x: x + u * 0.04,
|
||||||
|
y: y + barHeight / 2,
|
||||||
|
"dominant-baseline": "central",
|
||||||
|
"clip-path": "url(#bar)",
|
||||||
|
"font-family": fontStack(ctx.fonts.heading, "sans-serif"),
|
||||||
|
"font-weight": 800,
|
||||||
|
"font-size": title.size,
|
||||||
|
fill: ctx.kit.colors.background,
|
||||||
|
opacity: textOpacity,
|
||||||
|
}) +
|
||||||
|
(subtitle
|
||||||
|
? el("rect", {
|
||||||
|
x,
|
||||||
|
y: y + barHeight,
|
||||||
|
width: subWidth,
|
||||||
|
height: subtitle.size * 1.6,
|
||||||
|
fill: ctx.kit.colors.background,
|
||||||
|
}) +
|
||||||
|
textEl(subtitle.text, {
|
||||||
|
x: x + u * 0.03,
|
||||||
|
y: y + barHeight + subtitle.size * 0.8,
|
||||||
|
"dominant-baseline": "central",
|
||||||
|
"font-family": fontStack(ctx.fonts.body, "sans-serif"),
|
||||||
|
"font-size": subtitle.size,
|
||||||
|
fill: ctx.kit.colors.text,
|
||||||
|
opacity: textOpacity,
|
||||||
|
})
|
||||||
|
: "");
|
||||||
|
return svgDocument(ctx, body);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const lowerThirdPill: MotionTemplate = {
|
||||||
|
info: { id: "lt_pill", name: "Pill", ...LOWER_THIRD, params: [...TEXT_PARAMS] },
|
||||||
|
frame(t, ctx) {
|
||||||
|
const u = unit(ctx);
|
||||||
|
const { enter, leave } = presence(t, ctx);
|
||||||
|
const { title, subtitle } = lines(ctx, ctx.width * 0.55);
|
||||||
|
const height = subtitle ? title.size * 1.3 + subtitle.size * 1.6 : title.size * 2;
|
||||||
|
const dot = height * 0.62;
|
||||||
|
const width =
|
||||||
|
dot +
|
||||||
|
u * 0.07 +
|
||||||
|
Math.max(
|
||||||
|
textWidth(title.text, title.size),
|
||||||
|
subtitle ? textWidth(subtitle.text, subtitle.size) : 0,
|
||||||
|
);
|
||||||
|
const x = ctx.width * 0.06;
|
||||||
|
const y = ctx.height * 0.88 - height;
|
||||||
|
const scale = enter <= 0 ? 0.001 : easeOutBack(enter);
|
||||||
|
const textX = x + height / 2 + dot / 2 + u * 0.03;
|
||||||
|
const logo = ctx.logos[0];
|
||||||
|
const badge = logo
|
||||||
|
? el("image", {
|
||||||
|
href: logo,
|
||||||
|
x: x + height / 2 - dot / 2,
|
||||||
|
y: y + height / 2 - dot / 2,
|
||||||
|
width: dot,
|
||||||
|
height: dot,
|
||||||
|
preserveAspectRatio: "xMidYMid meet",
|
||||||
|
})
|
||||||
|
: el("circle", {
|
||||||
|
cx: x + height / 2,
|
||||||
|
cy: y + height / 2,
|
||||||
|
r: dot / 2,
|
||||||
|
fill: ctx.kit.colors.accent,
|
||||||
|
});
|
||||||
|
const body =
|
||||||
|
el("rect", {
|
||||||
|
x,
|
||||||
|
y,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
rx: height / 2,
|
||||||
|
fill: ctx.kit.colors.background,
|
||||||
|
}) +
|
||||||
|
badge +
|
||||||
|
textEl(title.text, {
|
||||||
|
x: textX,
|
||||||
|
y: subtitle ? y + title.size * 1.15 : y + height / 2,
|
||||||
|
"dominant-baseline": subtitle ? undefined : "central",
|
||||||
|
"font-family": fontStack(ctx.fonts.heading, "sans-serif"),
|
||||||
|
"font-weight": 700,
|
||||||
|
"font-size": title.size,
|
||||||
|
fill: ctx.kit.colors.text,
|
||||||
|
}) +
|
||||||
|
(subtitle
|
||||||
|
? textEl(subtitle.text, {
|
||||||
|
x: textX,
|
||||||
|
y: y + title.size * 1.15 + subtitle.size * 1.3,
|
||||||
|
"font-family": fontStack(ctx.fonts.body, "sans-serif"),
|
||||||
|
"font-size": subtitle.size,
|
||||||
|
fill: ctx.kit.colors.secondary,
|
||||||
|
})
|
||||||
|
: "");
|
||||||
|
const originX = x;
|
||||||
|
const originY = y + height / 2;
|
||||||
|
return svgDocument(
|
||||||
|
ctx,
|
||||||
|
el(
|
||||||
|
"g",
|
||||||
|
{
|
||||||
|
opacity: 1 - leave,
|
||||||
|
transform: `translate(${num(originX)} ${num(originY)}) scale(${num(scale)}) translate(${num(-originX)} ${num(-originY)})`,
|
||||||
|
},
|
||||||
|
body,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
106
packages/adapters/src/media-motion/templates/outros.ts
Normal file
106
packages/adapters/src/media-motion/templates/outros.ts
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
import { easeOutBack, easeOutCubic, progress } from "../easing.js";
|
||||||
|
import type { MotionTemplate } from "../template.js";
|
||||||
|
import {
|
||||||
|
ctaButton,
|
||||||
|
el,
|
||||||
|
fitText,
|
||||||
|
fontStack,
|
||||||
|
fullBackground,
|
||||||
|
logoEl,
|
||||||
|
stringParam,
|
||||||
|
svgDocument,
|
||||||
|
textEl,
|
||||||
|
unit,
|
||||||
|
} from "../template.js";
|
||||||
|
|
||||||
|
export const outroLogo: MotionTemplate = {
|
||||||
|
info: {
|
||||||
|
id: "outro_logo",
|
||||||
|
kind: "outro",
|
||||||
|
name: "Logo outro",
|
||||||
|
minDurationMs: 1500,
|
||||||
|
maxDurationMs: 6000,
|
||||||
|
params: [{ name: "message", type: "string", required: false }],
|
||||||
|
},
|
||||||
|
frame(t, ctx) {
|
||||||
|
const u = unit(ctx);
|
||||||
|
const d = ctx.durationMs;
|
||||||
|
const cx = ctx.width / 2;
|
||||||
|
const cy = ctx.height * 0.44;
|
||||||
|
const background = easeOutCubic(progress(t, 0, Math.min(500, d * 0.25)));
|
||||||
|
const pop = progress(t, d * 0.1, d * 0.4);
|
||||||
|
const scale = pop <= 0 ? 0 : easeOutBack(pop);
|
||||||
|
const size = u * 0.3 * scale;
|
||||||
|
const mark =
|
||||||
|
ctx.logos.length > 0
|
||||||
|
? logoEl(ctx, { x: cx - size / 2, y: cy - size / 2, w: size, h: size })
|
||||||
|
: el("circle", { cx, cy, r: Math.max(size / 2, 0.01), fill: ctx.kit.colors.primary });
|
||||||
|
const message = stringParam(ctx, "message") ?? ctx.kit.name;
|
||||||
|
const appear = easeOutCubic(progress(t, d * 0.3, d * 0.55));
|
||||||
|
const fitted = fitText(message, ctx.width * 0.8, u * 0.07, u * 0.035);
|
||||||
|
const text = textEl(fitted.text, {
|
||||||
|
x: cx,
|
||||||
|
y: cy + u * 0.26 + (1 - appear) * u * 0.03,
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"font-family": fontStack(ctx.fonts.heading, "sans-serif"),
|
||||||
|
"font-weight": 600,
|
||||||
|
"font-size": fitted.size,
|
||||||
|
fill: ctx.kit.colors.text,
|
||||||
|
opacity: appear,
|
||||||
|
});
|
||||||
|
return svgDocument(ctx, fullBackground(ctx, background) + mark + text);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const outroSubscribe: MotionTemplate = {
|
||||||
|
info: {
|
||||||
|
id: "outro_subscribe",
|
||||||
|
kind: "outro",
|
||||||
|
name: "Call to action outro",
|
||||||
|
minDurationMs: 2000,
|
||||||
|
maxDurationMs: 8000,
|
||||||
|
params: [
|
||||||
|
{ name: "cta", type: "string", required: true },
|
||||||
|
{ name: "handle", type: "string", required: false },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
frame(t, ctx) {
|
||||||
|
const u = unit(ctx);
|
||||||
|
const d = ctx.durationMs;
|
||||||
|
const cx = ctx.width / 2;
|
||||||
|
const background = easeOutCubic(progress(t, 0, Math.min(500, d * 0.2)));
|
||||||
|
const logoAppear = easeOutCubic(progress(t, d * 0.05, d * 0.3));
|
||||||
|
const size = u * 0.18;
|
||||||
|
const logo = logoEl(
|
||||||
|
ctx,
|
||||||
|
{ x: cx - size / 2, y: ctx.height * 0.18, w: size, h: size },
|
||||||
|
{ opacity: logoAppear },
|
||||||
|
);
|
||||||
|
const pop = progress(t, d * 0.15, d * 0.4);
|
||||||
|
// A gentle 1 Hz breathing pulse once the button has landed; no brightness change.
|
||||||
|
const pulse = pop >= 1 ? 1 + 0.03 * Math.sin(((t - d * 0.4) / 1000) * Math.PI * 2) : 1;
|
||||||
|
const button = ctaButton(
|
||||||
|
ctx,
|
||||||
|
stringParam(ctx, "cta") ?? "",
|
||||||
|
cx,
|
||||||
|
ctx.height * 0.55,
|
||||||
|
(pop <= 0 ? 0 : easeOutBack(pop)) * pulse,
|
||||||
|
);
|
||||||
|
const handle = stringParam(ctx, "handle");
|
||||||
|
let handleText = "";
|
||||||
|
if (handle) {
|
||||||
|
const appear = easeOutCubic(progress(t, d * 0.35, d * 0.6));
|
||||||
|
const fitted = fitText(handle, ctx.width * 0.8, u * 0.05, u * 0.03);
|
||||||
|
handleText = textEl(fitted.text, {
|
||||||
|
x: cx,
|
||||||
|
y: ctx.height * 0.55 + u * 0.16,
|
||||||
|
"text-anchor": "middle",
|
||||||
|
"font-family": fontStack(ctx.fonts.body, "sans-serif"),
|
||||||
|
"font-size": fitted.size,
|
||||||
|
fill: ctx.kit.colors.text,
|
||||||
|
opacity: appear,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return svgDocument(ctx, fullBackground(ctx, background) + logo + button + handleText);
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user