Export

Animation rendering and export configuration.

Standards Reference

Quick Reference

Load from: tokens/export.tokens.json

Output Formats

Resolution Presets

Framerate

Selection Guide

What's the target platform?
│
├── WEB → Vector or video
│   ├── Interactive → format.lottie + framerate.web
│   ├── Background → format.webm + framerate.video
│   └── Legacy → format.gif + framerate.gif
│
├── MOBILE → Native or web
│   ├── iOS/Android → format.lottie
│   ├── Cross-platform → format.lottie or format.gif
│   └── High quality → format.mp4
│
├── SOCIAL MEDIA
│   ├── Instagram → resolution.social-square + format.mp4
│   ├── Stories → resolution.social-story + format.mp4
│   └── Twitter → resolution.720p + format.mp4
│
├── VIDEO PRODUCTION
│   ├── 4K → resolution.4k + framerate.video
│   ├── 1080p → resolution.1080p + framerate.film
│   └── Preview → resolution.720p + quality.preview
│
└── GAME/APP
    ├── Sprite sheet → format.sprite-sheet
    ├── Vector → format.lottie
    └── Video bg → format.webm

Patterns

Lottie Export Configuration

Remotion:

import { renderMedia } from '@remotion/renderer';
import { bundle } from '@remotion/bundler';

const exportLottie = async (composition) => {
  // Note: Remotion doesn't export Lottie directly
  // Use for video, then convert or use Lottie-specific tools

  await renderMedia({
    composition,
    serveUrl: bundled,
    codec: 'h264',
    outputLocation: 'output.mp4',
    fps: 30, // {motion.export.framerate.video}
    crf: 18, // High quality
  });
};

Lottie Optimization:

// Lottie optimization settings
const lottieOptimize = {
  precision: 2, // {motion.export.optimization.lottie.precision}
  compress: true, // {motion.export.optimization.lottie.compress}

  // Remove unnecessary data
  removeExpressions: true,
  removeGuides: true,

  // Reduce keyframe density
  keyframeTolerance: 0.01,

  // Flatten transforms where possible
  flattenTransforms: true
};

GIF Export Configuration

Node.js with gif-encoder:

const GIFEncoder = require('gifencoder');

function createGifEncoder(width, height) {
  const encoder = new GIFEncoder(width, height);

  encoder.start();
  encoder.setRepeat(0); // 0 = loop forever
  encoder.setDelay(1000 / 15); // {motion.export.framerate.gif}
  encoder.setQuality(10); // Lower = better quality

  return encoder;
}

// Add frames
frames.forEach(frame => {
  encoder.addFrame(frame);
});

encoder.finish();

FFmpeg GIF:

# High quality GIF with palette
ffmpeg -i input.mp4 \
  -vf "fps=15,scale=480:-1:flags=lanczos,palettegen" \
  palette.png

ffmpeg -i input.mp4 -i palette.png \
  -filter_complex "fps=15,scale=480:-1:flags=lanczos[x];[x][1:v]paletteuse" \
  -loop 0 \
  output.gif

Video Export (Remotion)

1080p Standard:

import { renderMedia } from '@remotion/renderer';

await renderMedia({
  composition: myComp,
  serveUrl: bundled,
  codec: 'h264',
  outputLocation: 'output.mp4',
  imageFormat: 'jpeg',
  jpegQuality: 90, // {motion.export.quality.high}
  fps: 30, // {motion.export.framerate.video}
  crf: 18, // ~high quality
  width: 1920, // {motion.export.resolution.1080p}
  height: 1080,
});

4K High Quality:

await renderMedia({
  composition: myComp,
  serveUrl: bundled,
  codec: 'h264',
  outputLocation: 'output-4k.mp4',
  fps: 30,
  crf: 15, // Very high quality
  width: 3840, // {motion.export.resolution.4k}
  height: 2160,
  videoBitrate: '10M', // {motion.export.optimization.video.bitrate-high}
});

WebM for Web:

await renderMedia({
  composition: myComp,
  serveUrl: bundled,
  codec: 'vp8', // or 'vp9' for better quality
  outputLocation: 'output.webm',
  fps: 60, // {motion.export.framerate.web}
  width: 1920,
  height: 1080,
  videoBitrate: '5M', // {motion.export.optimization.video.bitrate-medium}
});

Social Media Presets

Instagram Square:

const instagramSquare = {
  width: 1080, // {motion.export.resolution.social-square}
  height: 1080,
  fps: 30,
  codec: 'h264',
  crf: 18,
  videoBitrate: '5M'
};

Instagram/TikTok Story:

const storyFormat = {
  width: 1080, // {motion.export.resolution.social-story}
  height: 1920,
  fps: 30,
  codec: 'h264',
  crf: 18,
  videoBitrate: '8M'
};

Sprite Sheet Export

Canvas-based:

function exportSpriteSheet(animation, options = {}) {
  const {
    columns = 8, // {motion.export.sprite.columns.grid-8}
    padding = 2, // {motion.export.sprite.padding.medium}
    frameWidth,
    frameHeight,
    frameCount
  } = options;

  const rows = Math.ceil(frameCount / columns);
  const sheetWidth = columns * (frameWidth + padding) - padding;
  const sheetHeight = rows * (frameHeight + padding) - padding;

  const canvas = document.createElement('canvas');
  canvas.width = sheetWidth;
  canvas.height = sheetHeight;
  const ctx = canvas.getContext('2d');

  for (let i = 0; i < frameCount; i++) {
    const col = i % columns;
    const row = Math.floor(i / columns);
    const x = col * (frameWidth + padding);
    const y = row * (frameHeight + padding);

    // Render frame i to position x, y
    renderFrame(ctx, animation, i, x, y);
  }

  return canvas.toDataURL('image/png');
}

Quality/Size Tradeoffs

const exportPresets = {
  highQuality: {
    // Maximum quality, larger files
    quality: 90, // {motion.export.quality.high}
    fps: 60, // {motion.export.framerate.web}
    crf: 15,
    bitrate: '10M'
  },
  balanced: {
    // Good quality, reasonable size
    quality: 75, // {motion.export.quality.medium}
    fps: 30, // {motion.export.framerate.video}
    crf: 23,
    bitrate: '5M'
  },
  webOptimized: {
    // Smaller files for web
    quality: 75,
    fps: 30,
    crf: 28,
    bitrate: '2M' // {motion.export.optimization.video.bitrate-low}
  },
  preview: {
    // Quick preview, small files
    quality: 30, // {motion.export.quality.preview}
    fps: 15, // {motion.export.framerate.gif}
    crf: 35,
    bitrate: '1M'
  }
};

Format Selection Helper

function selectExportFormat(requirements) {
  const { platform, transparency, fileSize, quality, interactivity } = requirements;

  if (interactivity) {
    return 'lottie'; // {motion.export.format.lottie}
  }

  if (transparency) {
    if (platform === 'web' && !isLegacyBrowser()) {
      return 'webp'; // {motion.export.format.webp}
    }
    return 'apng'; // {motion.export.format.apng}
  }

  if (fileSize === 'small') {
    return 'gif'; // {motion.export.format.gif}
  }

  if (platform === 'web') {
    return 'webm'; // {motion.export.format.webm}
  }

  return 'mp4'; // {motion.export.format.mp4}
}

Reduced Motion

Export considerations for accessibility:

• Always provide static fallback images
• Consider lower framerate exports for reduced motion
• Provide poster frames for video

const accessibleExport = {
  // Main animation
  animation: { format: 'lottie', fps: 60 },

  // Reduced motion version
  reducedMotion: { format: 'png', static: true },

  // Poster frame
  poster: { format: 'png', frame: 0 }
};

Cross-References

• See lottie/ for Lottie-specific features
• See remotion/ for video rendering details
• See frame-timing/ for framerate calculations
• See duration/ for animation length planning
• See accessibility/ for fallback requirements

References

• No additional references needed for this skill