remotion-markuplisted

This is guidance for writing Remotion React Markup. If this is not relevant, load [Remotion Best Practices](../remotion-best-practices/SKILL.md) 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`. ```tsx import { useCurrentFrame, Easing, interpolate, Interactive } from "remotion"; export const FadeIn = () => { const frame = useCurrentFrame(); return ( <Interactive.Div name="Title" style={{ opacity: interpolate(frame, [0, 60], [0, 1], { extrapolateRight: "clamp", extrapolateLeft: "clamp", easing: Easing.bezier(0.16, 1, 0.3, 1), }), }} > Hello World! </Interactive.Div> ); }; ``` Keep the `interpolate()` call inline in the `style` prop. Prefer `scale`, `translate`, `rotate` CSS properties over `transform`. ```tsx // 👍 Inline editable keyframes and transform shorthands style={{ scale: interpolate(frame, [0, 100], [0, 1]), translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]), rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),