remotion-markup — Claude Code skill: Remotion markup rules

What remotion-markup does

The skill covers how to write markup in Remotion. The core rule: keep useCurrentFrame() in the smallest component that needs it. Frame-dependent audio volume, titles and overlays go into their own components, otherwise unrelated descendants re-render on every frame.

Animations run on useCurrentFrame() and interpolate(). CSS transition and animation will not render correctly, and neither will Tailwind animation classes — both need refactoring. Timing is tuned with Easing.bezier() and Easing.spring(). Keep the interpolate() call inline in the style prop, and use scale, translate and rotate instead of transform so values stay editable in Studio. For seconds-to-frames math, pull fps from useVideoConfig() and leave the expression on the JSX node, like trimBefore={4 * fps}.

Media comes in through ` and from @remotion/media, images through , and animated GIF, APNG, WebP or AVIF through . Put files in public/ and reference them with staticFile(), or pass a remote URL. From there the skill points to separate files: video-editing.md, sequencing.md, timing-props.md, transitions.md, motion-blur.md, voiceover.md` and more. Worth installing if you already write Remotion compositions and want the agent to keep them editable in Studio. No Remotion in your project means nothing to apply it to.