Rendering

Export overview

Open the Export dialog from the editor header. There are two tabs:

• Standard (desktop‑oriented): Uses FFmpeg WebAssembly. Formats: MP4 (H.264), WebM (VP8/VP9), GIF.
• Transparent (advanced/mobile‑friendly): Canvas + WebCodecs/MediaBunny path that can produce WebM with alpha.

The app picks an engine automatically based on device and project complexity and falls back if an engine fails.

Standard export (desktop)

Standard export uses FFmpeg WebAssembly to composite visuals (videos, images, text, captions, AI overlays), mix audio, and encode the final file. It supports:

• MP4 (H.264, yuv420p) with AAC audio. Presets map to CRF/preset/GOP/bitrate settings.
• WebM (VP8/VP9) with fast or quality modes.
• GIF with palette optimizations (duration safeguards for very long clips).

Under the hood the app tries an advanced FFmpeg filter graph first (text, captions, transitions, overlays), then falls back to a simpler chain if advanced fails. For simple single‑clip WebM→MP4 conversions it uses a very fast shortcut pipeline. Extremely long or heavy timelines may use segmented export to reduce Wasm memory peaks.

• Speed modes: Fast prefers realtime VP8 settings; Quality uses VP9 CRF 18–42 with row‑mt.
• Duration mode: Full timeline or content‑only (trim leading/trailing empty sections).
• Fonts: Required fonts are embedded into FFmpeg FS before drawing text/captions.

Performance and isolation

• Multi‑threading (SharedArrayBuffer) is enabled only when the page is cross‑origin isolated (COOP/COEP).
• Headers are provided for common hosts (see public/_headers and vercel.json); if your host strips them, enable COOP/COEP for editor routes to unlock faster FFmpeg.
• WASM core files are preloaded and cached by the Service Worker in production.

Mobile export

On iOS/Android, Standard FFmpeg is avoided for stability. The app selects one of the following:

• MediaBunny: Worker‑backed transcoder/renderer tuned for mobile. Prefers this when online.
• MediaRecorder: Canvas capture fallback (video‑only). Used when offline or if HW encoders are restricted.
• WebCodecs: Hardware‑accelerated MP4 encoder where supported; used on capable browsers for higher quality.

The simplified mobile export panel picks a conservative resolution/bitrate and worker count to minimize jank.

Transparency and overlays

Use the Transparent tab to export assets with an alpha channel (stickers, overlays, or chroma‑keyed clips):

• Canvas pipeline composites the timeline with per‑pixel alpha and produces a WebM with alpha.
• Optional MP4 conversion is available for sharing convenience (note: MP4 does not carry alpha; the background is composited).
• Chroma key: Green/blue keying with softness and despill; applies only where enabled on clips.
• Audio: Mixed when needed; pure overlay exports can omit audio.

Advanced FFmpeg alpha formats (ProRes 4444, APNG, animated WebP) are supported in the engine code but not exposed by default in the UI. You can add toggles to target those codecs for professional pipelines.

Formats and codecs

• MP4 (H.264/AAC) — broad compatibility. Default for sharing.
• WebM (VP8 fast / VP9 quality) — good quality at lower bitrates; supports alpha in the transparent pipeline.
• GIF — short loops; for longer clips use WebM/MP4.
• Advanced (engine‑only): ProRes 4444 (alpha), APNG, animated WebP.

Tuning quality and speed

Export settings map to FFmpeg parameters (CRF, preset, bitrate, GOP, audio). Rough guidance:

• Quality: CRF 28 (low), 23 (medium), 18 (high), 14 (ultra).
• Speed: ultrafast → veryfast → medium → slow → veryslow. Faster = larger files, lower quality.
• Bitrate: Scales with resolution; baseline is 1080p. Audio defaults to 192–320 kbps stereo, 48 kHz.
• GOP: ~2 seconds (e.g., 60 at 30 fps) for better seeking.

Server rendering with Remotion Lambda

For very long or high‑resolution renders, offload to the cloud using Remotion Lambda. The recommended approach is to export a self‑contained project bundle (.klippy.bundle.json[.gz]) and let a Remotion composition render it on Lambda.

Architecture

• Client: Export “Project bundle” to JSON (.gz optional) and upload the bundle and assets to S3.
• Renderer repo (Remotion): A Composition reads the bundle from S3, recreates layers, and uses <OffthreadVideo />,<Audio />, and text components to mirror the timeline.
• Lambda: @remotion/lambda spins workers and writes the output back to S3.

Setup (high level)

1. Create a Remotion project (separate repo). Define a <Composition id="Klippy" /> that reads inputProps containing an S3 URL to the bundle.
2. Map bundle media to Remotion primitives: <Sequence from to> for timing; <OffthreadVideo src /> for videos (with transparent when needed),<Img /> for images, <Audio /> for audio. Apply transforms from the project’s element fields.
3. Install and configure @remotion/lambda. Deploy your renderer with npx remotion lambda deploy.
4. From your Next.js app, call Lambda with the bundle URL via a secure server route.

Example Lambda call (server)

import { renderMediaOnLambda } from '@remotion/lambda/client';
import { getRegions } from '@remotion/lambda/client';

export async function renderOnLambda({ bundleS3Url, outKey, fps = 30 }) {
  const [region] = await getRegions();
  const res = await renderMediaOnLambda({
    functionName: process.env.REMOTION_FUNCTION_NAME!,
    region,
    composition: 'Klippy',
    serveUrl: process.env.REMOTION_SERVE_URL!, // Deployed Remotion site
    inputProps: { bundleUrl: bundleS3Url },
    codec: 'h264',
    fps,
    privacy: 'public',
    outName: outKey,
  });
  return res.renderId; // Poll status or use webhooks
}

Notes: You are responsible for uploading the bundle to S3 and resolving asset URLs. For alpha outputs use Remotion’s ProRes / WebM alpha codecs. Costs depend on duration and concurrency; set memory/timeout appropriately. Keep Lambda credentials on the server only.

Troubleshooting

• “Out of memory” in FFmpeg: use 720p, shorter duration, or Transparent/MediaBunny on mobile. Ensure COOP/COEP for multi‑threading.
• First frame black in WebCodecs/Media recorder: warm‑up logic is included, but if you use custom sources ensure they are seekable and CORS‑clean.
• MP4 with alpha: not supported by H.264. Use WebM alpha or ProRes 4444 then convert downstream as needed.
• iOS share sheet: downloads fall back to a new tab if navigator.share is unavailable.