remotion-markup

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

General rules

Animate properties using useCurrentFrame() and interpolate().

Use interpolate() over spring().

Use Easing.bezier() to customize timing, including jumpy or overshooting motion. Use Easing.spring() if you want spring animations

HTML Elements which make sense to be made interactive in the Studio should use Interactive: <div> -> <Interactive.Div>.
Set a descriptive name prop such as name="Hero title" for Interactive, Solid, Sequence.

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