Video Common

Remotion Common Utilities

Shared patterns and references for all video skills in this project.

Project Structure

remotion-assistant/
├── src/
│   ├── index.tsx          # Entry point
│   ├── Root.tsx           # Composition registry
│   ├── compositions/      # Video compositions
│   └── components/        # Reusable components
├── public/                # Static assets
│   ├── fonts/
│   ├── images/
│   └── audio/
└── out/                   # Rendered output

Key APIs

• useCurrentFrame() - Current frame number
• useVideoConfig() - { width, height, fps, durationInFrames }
• interpolate(frame, [in], [out]) - Map values
• spring({ frame, fps, config }) - Physics animations

Adding New Compositions

1. Create component in src/compositions/ 2. Register in src/Root.tsx with <Composition> 3. Set: id, component, durationInFrames, fps, width, height

See References

• codecs.md - Encoding options
• animations.md - Animation patterns

Animation Patterns

Interpolate

Map input range to output range:

const opacity = interpolate(frame, [0, 30], [0, 1], {
  extrapolateRight: "clamp",
});

const x = interpolate(frame, [0, 60], [-100, 0]);

Options:

• extrapolateLeft: "clamp" | "extend" | "wrap"
• extrapolateRight: "clamp" | "extend" | "wrap"
• easing: Easing.ease, Easing.bezier(...)

Spring

Physics-based animations (returns 0→1 with overshoot):

const scale = spring({
  frame,
  fps,
  config: {
    damping: 10,    // Less = more bounce
    stiffness: 100, // More = faster
    mass: 0.5,      // More = slower
  },
});

Presets:

spring({ frame, fps }); // Default smooth
spring({ frame, fps, config: { damping: 200 } }); // No bounce

Sequences

Control timing:

<Sequence from={30} durationInFrames={60}>
  {/* Shows from frame 30-90 */}
  {/* useCurrentFrame() returns 0-60 inside */}
</Sequence>

Common Patterns

Fade In

const opacity = interpolate(frame, [0, 20], [0, 1], {
  extrapolateRight: "clamp",
});

Slide Up

const springValue = spring({ frame, fps });
const y = interpolate(springValue, [0, 1], [50, 0]);

Scale Bounce

const scale = spring({
  frame,
  fps,
  config: { damping: 8, stiffness: 200 },
});

Staggered Entrance

{items.map((item, i) => {
  const delay = i * 5;
  const opacity = interpolate(frame - delay, [0, 15], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
  return <div style={{ opacity }}>{item}</div>;
})}

Loop Animation

import { Loop } from "remotion";

<Loop durationInFrames={30}>
  <PulsingElement />
</Loop>

Video Codecs & Export Settings

Quick Reference

H264 (Default - Most Compatible)

npx remotion render CompositionId out.mp4 --codec=h264

Quality control with CRF (lower = better quality, larger file):

• --crf=18 - High quality
• --crf=23 - Default/balanced
• --crf=28 - Smaller file

Speed presets:

• --preset=ultrafast - Fast, larger file
• --preset=medium - Balanced (default)
• --preset=slow - Better compression

ProRes (For Editing)

npx remotion render CompositionId out.mov --codec=prores --prores-profile=hq

Profiles: proxy, light, standard, hq, 4444, 4444-xq

WebM (VP9)

npx remotion render CompositionId out.webm --codec=vp9

Good for web, supports transparency.

Common Options

--scale=0.5          # Half resolution (for previews)
--frames=0-30        # Render subset
--concurrency=4      # Parallel rendering
--overwrite          # Replace existing
--log=verbose        # Debug output

Aspect Ratios