What is frame rates & timebase determinism?

Motion Fundamentals

Frame rates & timebase determinism

Also searched as: frame rates, timebase, fps, 30fps vs 60fps, frame determinism, frame stepping

Canonical Definition

Frame rate is the frequency at which consecutive images appear on screen (e.g. 30fps, 60fps, 24fps); timebase determinism is the guarantee that frame N represents the exact same temporal state every render.

Easing Curve

Social: 30fps (optimal balance between smoothness and render speed); UI Demo: 60fps

Traditional web animation uses wall-clock time (`Date.now()` or `performance.now()`), which drops frames when the CPU is under load. Video creation demands strict timebase determinism: frame 45 at 30fps is mathematically fixed at exactly 1.500 seconds.

Understanding frame rates governs motion design choices: 24fps delivers cinematic film texture, 30fps is the standard for web and social distribution, and 60fps provides hyper-fluid UI microinteractions.

Why Remotion Uses Frames Instead of Milliseconds

Eliminating dropped frames and audio desync during heavy cloud renders

By decoupling animation state from real-time clock cycles, Remotion can pause, step backward, or take 200ms to render a single complex WebGL frame without affecting playback speed in the final exported MP4.

TimebaseConversion.tstsx

import { useCurrentFrame, useVideoConfig } from "remotion";

export const useTimeInSeconds = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  return frame / fps; // Exact mathematical time regardless of render lag
};

Engineering Guidelines & Common Pitfalls

Best Practices (What to do)

Always compute animation values strictly from `useCurrentFrame()` and `useVideoConfig().fps`.

Common Failure Modes (What to avoid)

Using `setTimeout` or `setInterval` in video components: these rely on wall-clock time and will ruin video synchronization.

Generate with AI

Build frame rates & timebase determinism in Animatiq

Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.

Launch in composer

Related motion principles