@redwilly/anima 0.1.0

package/dist/core/renderer/FrameRenderer.js

@@ -0,0 +1,75 @@
+import { createCanvas } from '@napi-rs/canvas';
+import { Matrix3x3 } from '../math/matrix/Matrix3x3';
+import { drawMobject } from './drawMobject';
+import { MANIM_FRAME_HEIGHT } from '../camera/types';
+/**
+ * Renders individual frames from a Scene.
+ * Responsible for drawing mobjects to a canvas at a specific point in time.
+ */
+export class FrameRenderer {
+    scene;
+    width;
+    height;
+    constructor(scene, width, height) {
+        this.scene = scene;
+        this.width = width;
+        this.height = height;
+    }
+    /**
+     * Calculates the matrix that transforms Manim world coordinates to screen pixels.
+     *
+     * Manim coordinate system:
+     * - Origin at center of screen
+     * - Y-axis points up
+     * - frameHeight = 8.0 units
+     *
+     * Screen coordinate system:
+     * - Origin at top-left
+     * - Y-axis points down
+     * - Width x Height pixels
+     */
+    calculateWorldToScreenMatrix() {
+        const camera = this.scene.getCamera();
+        const viewMatrix = camera.getViewMatrix();
+        // Scale from Manim units to pixels
+        // pixelHeight / MANIM_FRAME_HEIGHT = pixels per unit
+        const scale = this.height / MANIM_FRAME_HEIGHT;
+        // Build the world-to-screen transform:
+        // 1. Apply camera view transform (pan, zoom, rotation)
+        // 2. Scale from units to pixels
+        // 3. Flip Y-axis (Manim Y-up to screen Y-down)
+        // 4. Translate origin to screen center
+        const scaleMatrix = Matrix3x3.scale(scale, -scale); // Flip Y
+        const translateToCenter = Matrix3x3.translation(this.width / 2, this.height / 2);
+        // Combined: translate * scale * view
+        return translateToCenter.multiply(scaleMatrix).multiply(viewMatrix);
+    }
+    /**
+     * Renders a single frame at the specified time.
+     */
+    renderFrame(time) {
+        const canvas = createCanvas(this.width, this.height);
+        const ctx = canvas.getContext('2d');
+        // Seek timeline to the specified time
+        const timeline = this.scene.getTimeline();
+        timeline.seek(time);
+        // Draw background
+        const bgColor = this.scene.getBackgroundColor();
+        ctx.fillStyle = `rgb(${bgColor.r}, ${bgColor.g}, ${bgColor.b})`;
+        ctx.fillRect(0, 0, this.width, this.height);
+        // Calculate world-to-screen matrix each frame to pick up camera animations
+        const worldToScreen = this.calculateWorldToScreenMatrix();
+        // Draw all mobjects in order
+        const mobjects = this.scene.getMobjects();
+        for (const mobject of mobjects) {
+            drawMobject(ctx, mobject, worldToScreen);
+        }
+        return canvas;
+    }
+    /**
+     * Gets the canvas dimensions.
+     */
+    getDimensions() {
+        return { width: this.width, height: this.height };
+    }
+}

package/dist/core/renderer/ProgressReporter.d.ts

@@ -0,0 +1,19 @@
+import type { ProgressCallback } from './types';
+/**
+ * Tracks rendering progress and reports updates via callback.
+ */
+export declare class ProgressReporter {
+    private readonly totalFrames;
+    private readonly onProgress?;
+    private readonly startTime;
+    private currentFrame;
+    constructor(totalFrames: number, onProgress?: ProgressCallback);
+    /**
+     * Report progress for the current frame.
+     */
+    reportFrame(frameIndex: number): void;
+    /**
+     * Report rendering complete.
+     */
+    complete(): void;
+}

package/dist/core/renderer/ProgressReporter.js

@@ -0,0 +1,58 @@
+/**
+ * Tracks rendering progress and reports updates via callback.
+ */
+export class ProgressReporter {
+    totalFrames;
+    onProgress;
+    startTime;
+    currentFrame = 0;
+    constructor(totalFrames, onProgress) {
+        this.totalFrames = totalFrames;
+        this.onProgress = onProgress;
+        this.startTime = Date.now();
+    }
+    /**
+     * Report progress for the current frame.
+     */
+    reportFrame(frameIndex) {
+        this.currentFrame = frameIndex;
+        if (!this.onProgress)
+            return;
+        const elapsedMs = Date.now() - this.startTime;
+        const framesComplete = frameIndex + 1;
+        const percentage = this.totalFrames > 0
+            ? (framesComplete / this.totalFrames) * 100
+            : 100;
+        // Estimate remaining time based on average time per frame
+        let estimatedRemainingMs = 0;
+        if (framesComplete > 0 && framesComplete < this.totalFrames) {
+            const msPerFrame = elapsedMs / framesComplete;
+            const framesRemaining = this.totalFrames - framesComplete;
+            estimatedRemainingMs = msPerFrame * framesRemaining;
+        }
+        const progress = {
+            currentFrame: frameIndex,
+            totalFrames: this.totalFrames,
+            percentage: Math.min(100, Math.max(0, percentage)),
+            elapsedMs,
+            estimatedRemainingMs,
+        };
+        this.onProgress(progress);
+    }
+    /**
+     * Report rendering complete.
+     */
+    complete() {
+        if (!this.onProgress)
+            return;
+        const elapsedMs = Date.now() - this.startTime;
+        const progress = {
+            currentFrame: this.totalFrames - 1,
+            totalFrames: this.totalFrames,
+            percentage: 100,
+            elapsedMs,
+            estimatedRemainingMs: 0,
+        };
+        this.onProgress(progress);
+    }
+}

package/dist/core/renderer/Renderer.d.ts

@@ -0,0 +1,36 @@
+import type { Scene } from '../scene';
+import type { RenderConfig } from './types';
+/**
+ * Main renderer for producing output from Scenes.
+ * Supports multiple output formats and provides progress callbacks.
+ */
+export declare class Renderer {
+    /**
+     * Renders a scene to the specified output.
+     *
+     * @param scene The scene to render
+     * @param outputPath Output file or directory path (depends on format)
+     * @param config Optional render configuration
+     */
+    render(scene: Scene, outputPath: string, config?: RenderConfig): Promise<void>;
+    /**
+     * Renders only the last frame of a scene as a PNG.
+     *
+     * @param scene The scene to render
+     * @param outputPath Output PNG file path
+     * @param config Optional render configuration
+     */
+    renderLastFrame(scene: Scene, outputPath: string, config?: RenderConfig): Promise<void>;
+    /**
+     * Resolves partial config with scene defaults.
+     */
+    private resolveConfig;
+    /**
+     * Ensures the directory exists.
+     */
+    private ensureDirectory;
+    /**
+     * Renders a single frame (the last frame of the animation).
+     */
+    private renderSingleFrame;
+}

package/dist/core/renderer/Renderer.js

@@ -0,0 +1,102 @@
+import { FrameRenderer } from './FrameRenderer';
+import { ProgressReporter } from './ProgressReporter';
+import { writePng, renderSpriteSequence, renderVideo } from './formats';
+import { mkdir } from 'fs/promises';
+import { dirname } from 'path';
+/**
+ * Main renderer for producing output from Scenes.
+ * Supports multiple output formats and provides progress callbacks.
+ */
+export class Renderer {
+    /**
+     * Renders a scene to the specified output.
+     *
+     * @param scene The scene to render
+     * @param outputPath Output file or directory path (depends on format)
+     * @param config Optional render configuration
+     */
+    async render(scene, outputPath, config = {}) {
+        const resolved = this.resolveConfig(scene, config);
+        const totalDuration = scene.getTotalDuration();
+        // Handle preview quality (half resolution)
+        const width = resolved.quality === 'preview'
+            ? Math.floor(resolved.width / 2)
+            : resolved.width;
+        const height = resolved.quality === 'preview'
+            ? Math.floor(resolved.height / 2)
+            : resolved.height;
+        const frameRenderer = new FrameRenderer(scene, width, height);
+        const totalFrames = Math.max(1, Math.floor(totalDuration * resolved.frameRate) + 1);
+        const progressReporter = new ProgressReporter(totalFrames, resolved.onProgress);
+        switch (resolved.format) {
+            case 'sprite':
+                await this.ensureDirectory(outputPath);
+                await renderSpriteSequence(frameRenderer, outputPath, resolved.frameRate, totalDuration, progressReporter);
+                break;
+            case 'png':
+                await this.ensureDirectory(dirname(outputPath));
+                await this.renderSingleFrame(frameRenderer, outputPath, totalDuration, progressReporter);
+                break;
+            case 'mp4':
+            case 'webp':
+            case 'gif':
+                await this.ensureDirectory(dirname(outputPath));
+                await renderVideo(frameRenderer, outputPath, resolved.format, resolved.frameRate, totalDuration, progressReporter);
+                break;
+            default:
+                throw new Error(`Unsupported render format: ${resolved.format}`);
+        }
+    }
+    /**
+     * Renders only the last frame of a scene as a PNG.
+     *
+     * @param scene The scene to render
+     * @param outputPath Output PNG file path
+     * @param config Optional render configuration
+     */
+    async renderLastFrame(scene, outputPath, config = {}) {
+        const resolved = this.resolveConfig(scene, config);
+        const totalDuration = scene.getTotalDuration();
+        const width = resolved.quality === 'preview'
+            ? Math.floor(resolved.width / 2)
+            : resolved.width;
+        const height = resolved.quality === 'preview'
+            ? Math.floor(resolved.height / 2)
+            : resolved.height;
+        const frameRenderer = new FrameRenderer(scene, width, height);
+        const progressReporter = new ProgressReporter(1, resolved.onProgress);
+        await this.ensureDirectory(dirname(outputPath));
+        const canvas = frameRenderer.renderFrame(totalDuration);
+        await writePng(canvas, outputPath);
+        progressReporter.complete();
+    }
+    /**
+     * Resolves partial config with scene defaults.
+     */
+    resolveConfig(scene, config) {
+        return {
+            width: config.width ?? scene.getWidth(),
+            height: config.height ?? scene.getHeight(),
+            frameRate: config.frameRate ?? scene.getFrameRate(),
+            format: config.format ?? 'sprite',
+            quality: config.quality ?? 'production',
+            onProgress: config.onProgress,
+        };
+    }
+    /**
+     * Ensures the directory exists.
+     */
+    async ensureDirectory(dirPath) {
+        if (!dirPath)
+            return;
+        await mkdir(dirPath, { recursive: true });
+    }
+    /**
+     * Renders a single frame (the last frame of the animation).
+     */
+    async renderSingleFrame(frameRenderer, outputPath, totalDuration, progressReporter) {
+        const canvas = frameRenderer.renderFrame(totalDuration);
+        await writePng(canvas, outputPath);
+        progressReporter.complete();
+    }
+}

package/dist/core/renderer/drawMobject.d.ts

@@ -0,0 +1,8 @@
+import type { SKRSContext2D } from '@napi-rs/canvas';
+import type { Mobject } from '../../mobjects/Mobject';
+import { Matrix3x3 } from '../math/matrix/Matrix3x3';
+/**
+ * Draws a Mobject to a canvas context.
+ * Handles VMobject path rendering and VGroup recursion.
+ */
+export declare function drawMobject(ctx: SKRSContext2D, mobject: Mobject, worldToScreen: Matrix3x3): void;

package/dist/core/renderer/drawMobject.js

@@ -0,0 +1,109 @@
+import { VMobject } from '../../mobjects/VMobject';
+import { VGroup } from '../../mobjects/VGroup';
+/**
+ * Draws a Mobject to a canvas context.
+ * Handles VMobject path rendering and VGroup recursion.
+ */
+export function drawMobject(ctx, mobject, worldToScreen) {
+    // Skip invisible mobjects
+    if (mobject.opacity <= 0)
+        return;
+    if (mobject instanceof VGroup) {
+        drawVGroup(ctx, mobject, worldToScreen);
+    }
+    else if (mobject instanceof VMobject) {
+        drawVMobject(ctx, mobject, worldToScreen);
+    }
+    // Base Mobject has no visual representation
+}
+/**
+ * Draws a VGroup by recursively drawing its children.
+ */
+function drawVGroup(ctx, vgroup, worldToScreen) {
+    // VGroup opacity affects all children
+    if (vgroup.opacity <= 0)
+        return;
+    ctx.save();
+    ctx.globalAlpha *= vgroup.opacity;
+    for (const child of vgroup.getChildren()) {
+        drawMobject(ctx, child, worldToScreen);
+    }
+    ctx.restore();
+}
+/**
+ * Draws a VMobject's paths to the canvas.
+ */
+function drawVMobject(ctx, vmobject, worldToScreen) {
+    const paths = vmobject.paths;
+    if (paths.length === 0)
+        return;
+    // Combine mobject's world matrix with world-to-screen transform
+    const mobjectWorld = vmobject.getWorldMatrix();
+    const transform = worldToScreen.multiply(mobjectWorld);
+    ctx.save();
+    ctx.globalAlpha *= vmobject.opacity;
+    // Draw each path
+    for (const path of paths) {
+        const commands = path.getCommands();
+        if (commands.length === 0)
+            continue;
+        ctx.beginPath();
+        applyPathCommands(ctx, commands, transform);
+        // Fill first (so stroke is on top)
+        if (vmobject.getFillOpacity() > 0) {
+            const fillColor = vmobject.getFillColor();
+            ctx.fillStyle = `rgba(${fillColor.r}, ${fillColor.g}, ${fillColor.b}, ${vmobject.getFillOpacity()})`;
+            ctx.fill();
+        }
+        // Then stroke
+        if (vmobject.getStrokeWidth() > 0) {
+            const strokeColor = vmobject.getStrokeColor();
+            ctx.strokeStyle = `rgba(${strokeColor.r}, ${strokeColor.g}, ${strokeColor.b}, ${strokeColor.a})`;
+            ctx.lineWidth = vmobject.getStrokeWidth();
+            ctx.lineCap = 'round';
+            ctx.lineJoin = 'round';
+            ctx.stroke();
+        }
+    }
+    ctx.restore();
+}
+/**
+ * Applies BezierPath commands to a canvas context.
+ */
+function applyPathCommands(ctx, commands, transform) {
+    for (const cmd of commands) {
+        switch (cmd.type) {
+            case 'Move': {
+                const p = transform.transformPoint(cmd.end);
+                ctx.moveTo(p.x, p.y);
+                break;
+            }
+            case 'Line': {
+                const p = transform.transformPoint(cmd.end);
+                ctx.lineTo(p.x, p.y);
+                break;
+            }
+            case 'Quadratic': {
+                if (cmd.control1) {
+                    const cp = transform.transformPoint(cmd.control1);
+                    const ep = transform.transformPoint(cmd.end);
+                    ctx.quadraticCurveTo(cp.x, cp.y, ep.x, ep.y);
+                }
+                break;
+            }
+            case 'Cubic': {
+                if (cmd.control1 && cmd.control2) {
+                    const cp1 = transform.transformPoint(cmd.control1);
+                    const cp2 = transform.transformPoint(cmd.control2);
+                    const ep = transform.transformPoint(cmd.end);
+                    ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, ep.x, ep.y);
+                }
+                break;
+            }
+            case 'Close': {
+                ctx.closePath();
+                break;
+            }
+        }
+    }
+}

package/dist/core/renderer/formats/index.d.ts

@@ -0,0 +1,3 @@
+export { writePng } from './png';
+export { renderSpriteSequence } from './sprite';
+export { renderVideo } from './video';

package/dist/core/renderer/formats/index.js

@@ -0,0 +1,3 @@
+export { writePng } from './png';
+export { renderSpriteSequence } from './sprite';
+export { renderVideo } from './video';

package/dist/core/renderer/formats/png.d.ts

@@ -0,0 +1,5 @@
+import type { Canvas } from '@napi-rs/canvas';
+/**
+ * Encodes a canvas frame to PNG and writes to file.
+ */
+export declare function writePng(canvas: Canvas, outputPath: string): Promise<void>;

package/dist/core/renderer/formats/png.js

@@ -0,0 +1,7 @@
+/**
+ * Encodes a canvas frame to PNG and writes to file.
+ */
+export async function writePng(canvas, outputPath) {
+    const buffer = canvas.toBuffer('image/png');
+    await Bun.write(outputPath, buffer);
+}

package/dist/core/renderer/formats/sprite.d.ts

@@ -0,0 +1,6 @@
+import type { FrameRenderer } from '../FrameRenderer';
+import type { ProgressReporter } from '../ProgressReporter';
+/**
+ * Renders frames to a sprite sequence (numbered PNG files).
+ */
+export declare function renderSpriteSequence(frameRenderer: FrameRenderer, outputDir: string, frameRate: number, totalDuration: number, progressReporter: ProgressReporter): Promise<void>;

package/dist/core/renderer/formats/sprite.js

@@ -0,0 +1,24 @@
+import { writePng } from './png';
+import { join } from 'path';
+/**
+ * Pads a number with leading zeros to reach the specified length.
+ */
+function padNumber(n, length) {
+    return n.toString().padStart(length, '0');
+}
+/**
+ * Renders frames to a sprite sequence (numbered PNG files).
+ */
+export async function renderSpriteSequence(frameRenderer, outputDir, frameRate, totalDuration, progressReporter) {
+    const totalFrames = Math.max(1, Math.floor(totalDuration * frameRate) + 1);
+    const digitCount = Math.max(4, totalFrames.toString().length);
+    for (let frameIndex = 0; frameIndex < totalFrames; frameIndex++) {
+        const time = frameIndex / frameRate;
+        const canvas = frameRenderer.renderFrame(time);
+        const filename = `frame_${padNumber(frameIndex, digitCount)}.png`;
+        const outputPath = join(outputDir, filename);
+        await writePng(canvas, outputPath);
+        progressReporter.reportFrame(frameIndex);
+    }
+    progressReporter.complete();
+}

package/dist/core/renderer/formats/video.d.ts

@@ -0,0 +1,8 @@
+import type { FrameRenderer } from '../FrameRenderer';
+import type { ProgressReporter } from '../ProgressReporter';
+import type { RenderFormat } from '../types';
+/**
+ * Renders a scene to a video file using FFmpeg.
+ * Frames are rendered sequentially and piped to FFmpeg's stdin.
+ */
+export declare function renderVideo(frameRenderer: FrameRenderer, outputPath: string, format: RenderFormat, frameRate: number, totalDuration: number, progressReporter: ProgressReporter): Promise<void>;

package/dist/core/renderer/formats/video.js

@@ -0,0 +1,51 @@
+/**
+ * Renders a scene to a video file using FFmpeg.
+ * Frames are rendered sequentially and piped to FFmpeg's stdin.
+ */
+export async function renderVideo(frameRenderer, outputPath, format, frameRate, totalDuration, progressReporter) {
+    const { width, height } = frameRenderer.getDimensions();
+    const totalFrames = Math.max(1, Math.floor(totalDuration * frameRate) + 1);
+    // Determine FFmpeg arguments based on format
+    const ffmpegArgs = [
+        '-y', // Overwrite output
+        '-f', 'image2pipe',
+        '-vcodec', 'png', // Input format from pipe
+        '-r', frameRate.toString(),
+        '-i', '-', // Read from stdin
+    ];
+    if (format === 'mp4') {
+        ffmpegArgs.push('-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-crf', '18');
+    }
+    else if (format === 'webp') {
+        ffmpegArgs.push('-c:v', 'libwebp', '-lossless', '0', '-compression_level', '4', '-q:v', '75', '-loop', '0');
+    }
+    else if (format === 'gif') {
+        ffmpegArgs.push('-vf', `fps=${frameRate},scale=${width}:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse`);
+    }
+    ffmpegArgs.push(outputPath);
+    const process = Bun.spawn(['ffmpeg', ...ffmpegArgs], {
+        stdin: 'pipe',
+    });
+    try {
+        for (let frameIndex = 0; frameIndex < totalFrames; frameIndex++) {
+            const time = frameIndex / frameRate;
+            const canvas = frameRenderer.renderFrame(time);
+            // Convert canvas to PNG buffer and write to FFmpeg's stdin
+            const pngBuffer = await canvas.toBuffer('image/png');
+            process.stdin.write(pngBuffer);
+            progressReporter.reportFrame(frameIndex);
+        }
+        // Close stdin and wait for FFmpeg to finish
+        process.stdin.end();
+        const status = await process.exited;
+        if (status !== 0) {
+            throw new Error(`FFmpeg process exited with code ${status}`);
+        }
+    }
+    catch (error) {
+        // Kill FFmpeg process if something went wrong
+        process.kill();
+        throw error;
+    }
+    progressReporter.complete();
+}

package/dist/core/renderer/index.d.ts

@@ -0,0 +1,7 @@
+export { Renderer } from './Renderer';
+export { FrameRenderer } from './FrameRenderer';
+export { ProgressReporter } from './ProgressReporter';
+export { drawMobject } from './drawMobject';
+export type { RenderConfig, ResolvedRenderConfig, RenderFormat, RenderQuality, RenderProgress, ProgressCallback, } from './types';
+export { Resolution } from './types';
+export { writePng, renderSpriteSequence } from './formats';

package/dist/core/renderer/index.js

@@ -0,0 +1,9 @@
+// Renderer Module
+// Provides frame rendering and output generation for Scenes.
+export { Renderer } from './Renderer';
+export { FrameRenderer } from './FrameRenderer';
+export { ProgressReporter } from './ProgressReporter';
+export { drawMobject } from './drawMobject';
+export { Resolution } from './types';
+// Format utilities
+export { writePng, renderSpriteSequence } from './formats';

package/dist/core/renderer/types.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Supported render output formats.
+ * - sprite: PNG sequence (frame_0000.png, frame_0001.png, ...)
+ * - png: Single PNG frame
+ * - mp4: H.264 video (requires FFmpeg - future)
+ * - webp: Animated WebP (requires FFmpeg - future)
+ * - gif: Animated GIF (requires FFmpeg - future)
+ */
+export type RenderFormat = 'sprite' | 'png' | 'mp4' | 'webp' | 'gif';
+/**
+ * Quality presets for rendering.
+ * - production: Full resolution, best quality
+ * - preview: Half resolution for faster preview
+ */
+export type RenderQuality = 'production' | 'preview';
+/**
+ * Standard resolution presets.
+ */
+export declare const Resolution: {
+    /** 854x480 (16:9) */
+    readonly p480: {
+        readonly width: 854;
+        readonly height: 480;
+    };
+    /** 1280x720 (16:9) */
+    readonly p720: {
+        readonly width: 1280;
+        readonly height: 720;
+    };
+    /** 1920x1080 (16:9) */
+    readonly p1080: {
+        readonly width: 1920;
+        readonly height: 1080;
+    };
+    /** 3840x2160 (16:9) */
+    readonly p4K: {
+        readonly width: 3840;
+        readonly height: 2160;
+    };
+};
+/**
+ * Configuration for rendering.
+ */
+export interface RenderConfig {
+    /** Output width in pixels. Defaults to scene width. */
+    width?: number;
+    /** Output height in pixels. Defaults to scene height. */
+    height?: number;
+    /** Frames per second. Defaults to scene frame rate. */
+    frameRate?: number;
+    /** Output format. Defaults to 'sprite'. */
+    format?: RenderFormat;
+    /** Quality preset. Defaults to 'production'. */
+    quality?: RenderQuality;
+    /** Progress callback for render updates. */
+    onProgress?: ProgressCallback;
+}
+/**
+ * Resolved render configuration with all values specified.
+ */
+export interface ResolvedRenderConfig {
+    width: number;
+    height: number;
+    frameRate: number;
+    format: RenderFormat;
+    quality: RenderQuality;
+    onProgress?: ProgressCallback;
+}
+/**
+ * Progress information during rendering.
+ */
+export interface RenderProgress {
+    /** Current frame being rendered (0-indexed). */
+    currentFrame: number;
+    /** Total number of frames to render. */
+    totalFrames: number;
+    /** Percentage complete (0-100). */
+    percentage: number;
+    /** Elapsed time in milliseconds. */
+    elapsedMs: number;
+    /** Estimated remaining time in milliseconds. */
+    estimatedRemainingMs: number;
+}
+/**
+ * Callback for progress updates during rendering.
+ */
+export type ProgressCallback = (progress: RenderProgress) => void;

package/dist/core/renderer/types.js

@@ -0,0 +1,13 @@
+/**
+ * Standard resolution presets.
+ */
+export const Resolution = {
+    /** 854x480 (16:9) */
+    p480: { width: 854, height: 480 },
+    /** 1280x720 (16:9) */
+    p720: { width: 1280, height: 720 },
+    /** 1920x1080 (16:9) */
+    p1080: { width: 1920, height: 1080 },
+    /** 3840x2160 (16:9) */
+    p4K: { width: 3840, height: 2160 },
+};