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

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.

Structure your markup according to Remotion Interactivity Best Practices. Prefer Interactive.create({layout: 'absolute-fill'}) for scenes with editable props. Their inner markup can return a fragment; the wrapper handles layout and instance styles. Sized elements such as lower thirds can keep the default layout and forward style to their own root. Register reusable scenes as connected compositions. Put timing directly on components that support it; avoid redundant <Sequence> wrappers.

The Studio edits the JSX source node that created an item. Author every composition registration, clip, scene, layer and sequence that should be editable independently as its own JSX node, with its editable props inline. Programmatic loops are suitable when the generated instances are intentionally controlled as one source template, not when users need to edit the instances separately.

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

export const FadeIn = () => {
  const frame = useCurrentFrame();