remotion-markup

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

General rules

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

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

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