remotion-markup

This is guidance for writing Remotion React Markup. If this is not relevant, load Remotion Best Practices instead.

Preserve user changes

Users may make edits in the code outside of the conversation.

If you detect a surprising change made in the meanwhile, don't overwrite it, assume it was intentional or ask for confirmation.

General rules

Keep useCurrentFrame() in the smallest component that needs it. Extract frame-dependent audio volume, titles, and overlays into their own components instead of subscribing the whole composition or scene; otherwise unrelated descendants re-render on every frame. Preserve the existing frame coordinates when extracting across timing boundaries, and keep editable interpolations inline on the item's props.

Inside a composition or scene component, get fps from useVideoConfig() for all seconds-to-frames calculations, including timing props such as from, trimBefore and durationInFrames. Keeping the expression on the JSX node, such as trimBefore={4 * fps}, lets Studio edit the timing and keeps it correct if the composition frame rate changes.

Drive animations using useCurrentFrame() and interpolate().
CSS transition or animation will not render correctly, they need to refactored.
Tailwind animation class will not render correctly, they need to be refactored.

Use Easing.bezier() and Easing.spring() to customize timing.

Before choosing the markup hierarchy, read editable timeline structure. Choose editing units first, then the tracks or shared timing boundaries they need. It includes a complete example with interactive components and their registrations. For source-editable styles, schemas, and keyframes, see Remotion Interactivity.

import { useCurrentFrame, useVideoConfig, Easing, interpolate, Interactive } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();

  return (
    <Interactive.Div
      name="Title"
      style={{
        opacity: interpolate(frame, [0, 2 * fps], [0, 1], {
          extrapolateRight: "clamp",
          extrapolateLeft: "clamp",
          easing: Easing.bezier(0.16, 1, 0.3, 1),
        }),
      }}
    >
      Hello World!
    </Interactive.Div>
  );
};