# Remotion Markup

Content, animation and effects best practices

- Repository: https://github.com/remotion-dev/remotion (69731 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add remotion-dev/remotion --skill remotion-markup -g -a claude-code -y`
Codex: `npx skills add remotion-dev/remotion --skill remotion-markup -g -a codex -y`
Cursor: `npx skills add remotion-dev/remotion --skill remotion-markup -g -a cursor -y`
Gemini CLI: `npx skills add remotion-dev/remotion --skill remotion-markup -g -a gemini-cli -y`

## Description

Content, animation and effects best practices

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

This is guidance for writing Remotion React Markup.
If this is not relevant, load [Remotion Best Practices](../remotion-best-practices/SKILL.md) 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

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](../remotion-interactivity/SKILL.md)

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

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

  return (
    <Interactive.Div
      name="Title"
      style={{
        opacity: interpolate(frame, [0, 2 * fps], [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.
Use `scale`, `translate`, `rotate` CSS properties over `transform`.

The rest: https://github.com/remotion-dev/remotion/blob/HEAD/packages/codex-plugin/skills/remotion-markup/SKILL.md